有没有办法使 DIV 不可选择？答案

【问题标题】：Is there a way to make a DIV unselectable?有没有办法使 DIV 不可选择？
【发布时间】：2010-10-29 19:44:39
【问题描述】：

这是一个有趣的 CSS 问题！

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

【问题讨论】：

您对 JavaScript 解决方案满意吗？

标签： css

【解决方案1】：

不久前我写了一个简单的 jQuery 扩展来禁用选择：Disabling Selection in jQuery。您可以通过$('.button').disableSelection();调用它

或者，使用 CSS（跨浏览器）：

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

【讨论】：

@kasperTaeymans 感谢您指出这一点。更新了 sn-p。
@kasperTaeymans 但它在 W3C working draft... 以防万一。
不要从我赞成的原始答案中拿走任何东西，但它已经有 3 年以上的历史了。所以我在下面添加了一个答案（stackoverflow.com/questions/924916/…），并添加了触摸界面的设置。
这就是我想要的可移动引导模式标题！谢谢！

【解决方案2】：

以下 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>

【讨论】：

unselectable="on" 的目的是什么。可以给个参考吗
我在这里找到了：msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx 但我实际上在 IE 上测试过，它工作正常。
我不确定。但是 unselectable="on" 可能包含在 IE 中，并且 W3C 验证器不接受该属性。
虽然它适用于现代浏览器，但 W3C 尚未指定。

【解决方案3】：

只是更新了 aleemb 的原始、备受赞誉的答案，并在 css 中添加了一些内容。

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

.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';

【讨论】：

将user-select: none 应用于div 没有任何效果。我很确定user-select 仅用于文本。还有其他方法可以使div 无法选择吗？

【解决方案4】：

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

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

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);

丰富

【讨论】：

【解决方案5】：

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

div {
  pointer-events: none;
}

【讨论】：

这正是我需要避免我的
从隐藏的 div 抓取选择。谢谢！

【解决方案6】：

你可以试试这个：

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

【讨论】：

还是可以双击选择的。

【解决方案7】：

文本区域的简单背景图像不够吗？

【讨论】：

好吧，我的意思是水印，但透明的背景图像也可以。此外，您不应该平铺非常小的图像，因为在这种情况下某些浏览器会变得非常缓慢:)
特别是因为 1000x1000 透明 png（或 gif）只有 4kb。
实际上更像 1 KiB :-)

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

同样在 IOS 中，如果你想摆脱出现在触摸屏上的灰色半透明覆盖，添加 css：

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

【讨论】：

【解决方案10】：

使用

onselectstart="return false"

它可以防止复制您的内容。

【讨论】：

此解决方案已被其他人发布。

【解决方案11】：

确保将位置显式设置为绝对或相对，以便 z-index 用于选择。我有一个类似的问题，这为我解决了。

【讨论】：

【解决方案12】：

不确定你的用例，但你可以让它可拖动。

【讨论】：

这是一个令人不快但有效的答案。