如何使我的 html 的某些部分不可选？答案

【问题标题】：How can I make certain parts of my html not selectable?如何使我的 html 的某些部分不可选？
【发布时间】：2010-11-30 01:56:17
【问题描述】：

如何使我的 html 的某些部分不可选？

如果用户尝试选择我的页面内容，我有一些绝对定位的 div 会不断被选中。

有没有办法让某些元素（例如那些 div）不可选？

编辑：主要问题是当有人复制这些绝对 div，然后将它们粘贴到我网站上的富文本编辑器中时，富文本编辑器会在 IE 上中断。

【问题讨论】：

可能相关的问题：stackoverflow.com/questions/924916/…
下面建议的 jQuery 解决方案看起来很有希望，如果它不适合你，用纯 JavaScript 构造东西也不应该很复杂，请告诉我们。 :)

标签： javascript html css

【解决方案1】：

对于 IE，添加属性unselectable="ON"。（编辑：虽然不会完全有帮助）

对于 Gecko，添加 CSS 样式 -moz-user-select: none。

对于 WebKit，添加 CSS 样式 -webkit-user-select: none。

【讨论】：

试过unselectable="ON"，但没有成功。阅读 MSDN 说：An element with the UNSELECTABLE attribute set to on can be included in a selection that starts somewhere outside the element. 所以当他们试图复制内容区域时，它仍然会被无意选中。
+1 太好了！并且 unselectable 属性在 Opera 中也有效。

【解决方案2】：

如果你只想隐藏选择矩形，你可以使用

element::selection { background: transparent }

它是壁虎的对应物

element::-moz-selection { background: transparent }

如果您想帮助您的用户选择正确的文本以复制到剪贴板，您可以将元素移开。通常，浏览器在选择时会保留 HTML 中定义的元素顺序。虽然这不是完美的解决方案，但您可以将元素的代码放在 HTML 中 <body> 标记的开头或结尾处。这样，如果用户在页面中间选择了某些东西，该元素将太“远”而无法干扰。

【讨论】：

+1 - 是的，我想帮助他们选择正确的文本进行复制。关于将绝对 div 放置得太远而无法选择的好建议。
+1 @Athari ：这是正确的解决方案。由于您的 divs 是绝对定位的，因此您可以重新排序它们在 HTML 中出现的位置。这将有助于用户选择正确的文本。事实上，我赞扬@Kyle 考虑到这一点，因为当我尝试剪辑选择时随机选择divs 时，我真的很生气。

【解决方案3】：

这篇文章可能对跨浏览器解决方案有所帮助：（使用 jQuery） http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

理论上，您可以使用以下方式扩展 jQUery 核心：

jQuery.fn.extend({ 
    disableSelection : function() { 
            return this.each(function() { 
                    this.onselectstart = function() { return false; }; 
                    this.unselectable = "on"; 
                    jQuery(this).addClass('unselectable');
            }); 
    } 
});

并像这样应用它：

// disable selection on selected objects 
$('.myClass').disableSelection();

你必须确保你的样式表中有这个：

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

看起来好像它基本上做了 SLaks 和 Sime 提到的事情。我还没有尝试过，但我很想知道它是否有效

【讨论】：

@Sebastian 考虑到各种用户选择属性，定义一个类会更有效：.unselectable { user-select:none; -moz-user-select:none; ... }，然后只写：$(this).addClass("unselectable")。
@Sime 但是 IE 呢？我假设this.unselectable = "on"; 负责资源管理器。否则，你是完全正确的。
@Sebastian IE 的那一行没问题。但是正如我所说的，应该用 addClass() 替换那些带有 css() 方法的 5 行。
@Sebastian 用户选择属性使其可以在 Firefox、Chrome 和 Safari 中使用。 unselectable 属性使它可以在 IE 和 Opera 中工作。但是，我不知道 onselectstart 属性适用于哪些浏览器。 ...但它不疼。
@Šime 我相信onselectstart 也只能被 IE 读取，但 js 不是我的强项。 msdn.microsoft.com/en-us/library/ms536969(VS.85).aspx

【解决方案4】：

您可以使用::selection 伪元素使某个元素的选择“不可见”：

p::selection { background-color:transparent; }  
p::-moz-selection { background-color:transparent; }

但是，这在 IE 中不起作用。

【讨论】：

但他们会在 IE9 中支持它！

【解决方案5】：

jQuery 解决方案：

$(".unselectable").disableSelection();

【讨论】：