有没有办法让DIV无法选择？

这是一个有趣的CSS问题给你!

我有一个透明背景的textarea覆盖了一些TEXT,我想用它作为一种水印.文本很大,占据了textarea的大部分.它看起来不错,问题是当用户点击textarea时,它有时会选择水印文本.我希望水印文本永远不会被选中.我期待如果z-index中的某些内容较低,则无法选择,但浏览器在选择项目时似乎并不关心z-index层.有没有一个技巧或方法来使它这样DIV永远不可选择？

1> aleemb..：

---

我写了一个简单的jQuery扩展来禁用选择一段时间:在jQuery中禁用选择.你可以调用它$('.button').disableSelection();

或者,使用CSS(跨浏览器):

.button {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
} 

---

我不赞成从最初的答案中拿出任何东西，但它已有3年以上的历史了。因此，我在下方（http://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable/24831222#24831222）中添加了答案，并为触摸界面添加了设置。

2> KimKha..：

---

以下CSS代码几乎适用于现代浏览器:

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

对于IE,您必须在html标记中使用JS或insert属性.

...

---

我在这里找到:http://msdn.microsoft.com/en-us/library/hh801966(v = vs.85).aspx但我实际上在IE上测试过,它运行正常.

3> Anne Gunn..：

---

只需更新一些对CSS的补充,就可以更新aleemb的原始,备受推崇的答案.

我们一直在使用以下组合:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

我们建议添加webkit-touch条目:http:
//phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015年4月:只需使用可能派上用场的变体更新我自己的答案.如果您需要动态地选择/不可选择DIV并且愿意使用Modernizr,以下工作在javascript中整齐地工作:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

4> kim3er..：

---

正如Johannes已经建议的那样,背景图像可能是仅在CSS中实现这一目标的最佳方式.

JavaScript解决方案还必须影响"dragstart"才能在所有流行的浏览器中生效.

JavaScript的:

your text

jQuery的:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

丰富

5> Linh Dam..：

---

您可以pointer-events: none;在CSS中使用

div {
  pointer-events: none;
}

6> Fortega..：

---

你可以试试这个:

your text

7> Joey..：

---

textarea的简单背景图片不会足够吗？