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

这是一个有趣的CSS问题！

我有一个带有透明背景的文本区域，上面覆盖着一些我想用作水印的文本。文本很大，占据了大部分文本区域。看起来不错，问题是当用户单击文本区域时，有时会选择水印文本。我希望水印文本永远不可选择。我原以为如果z索引中的某个值较低，那将是无法选择的，但浏览器在选择项目时似乎并不关心z索引层。有没有技巧或方法可以使该DIV永远不会被选择？

我写了一个简单的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;
} 

以下CSS代码几乎可以在现代浏览器中运行：

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

对于IE，您必须使用JS或在html标记中插入属性。

<div id="foo" unselectable="on" class="unselectable">...</div>

只需在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或选择DIV，并且愿意使用Modernizr，则可以在javascript中巧妙地使用以下代码：

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

正如Johannes已经建议的那样，背景图像可能是仅在CSS中实现此目标的最佳方法。

JavaScript解决方案还必须影响“拖动开始”才能在所有流行的浏览器上均有效。

JavaScript：

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery的：

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

丰富

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

div {
  pointer-events: none;
}

您可以尝试以下方法：

<div onselectstart="return false">your text</div>

文本区域的简单背景图像是否足够？

WebKit浏览器（即Google Chrome和Safari）具有类似于Mozilla的-moz-user-select：none的CSS解决方案。

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

同样在IOS中，如果您想摆脱触摸时出现的灰色半透明覆盖层，请添加CSS：

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

用

onselectstart =“返回假”

它防止复制您的内容。

确保将位置明确设置为绝对或相对位置，以使z-index可以进行选择。我有一个类似的问题，这为我解决了。

不确定您的用例，但可以将其拖动。