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

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

我有一些绝对定位的div，如果用户试图选择我页面的内容，它们会一直被选中

有没有办法使某些元素（如div）不可选择

---

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

您可以使用

：：selection

伪元素使某个元素的选择“不可见”：

---

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

对于IE，添加属性

unselectable=“ON”

。（编辑：尽管这不会完全有帮助）

对于Gecko，添加CSS样式

-moz user select:none

---

对于WebKit，添加CSS样式

-WebKit用户选择：none

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

element::selection { background: transparent }

这是壁虎的对应物

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

---

如果要帮助用户选择要复制到剪贴板的正确文本，可以将元素移开。通常，浏览器在选择时会保留HTML中定义的元素顺序。虽然这不是一个完美的解决方案，但您可以将元素的代码放在HTML的

标记的最开始或最末尾。这样，如果用户在页面的中间选择了某个元素，那么这个元素就太“远”了。

这篇文章可能有助于跨浏览器解决方案：（使用jQuery）

理论上，您可以使用以下方法扩展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提到的那样。

---

我还没有尝试过，但我很想知道它是否有效

jQuery解决方案：

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

---

但他们会在IE9中支持它！可能相关的问题：下面建议的jQuery解决方案看起来很有希望，如果它对您不起作用，那么用纯JavaScript构建东西也不会太复杂，请告诉我们。：）尝试了

unselectable=“ON”

，但无效。阅读MSDN时会说：

不可选择属性设置为on的元素可以包含在从元素外部某处开始的选择中。

因此，当他们试图复制内容区域时，它仍然会被无意中选中。+1太好了！不可选择属性在Opera中也起作用。+1-是的，我想帮助他们选择正确的文本进行复制。关于将绝对div放置得太远而无法选择的好建议。+1@Athari：这是正确的解决方案。由于您的

div

s是绝对位置，因此您可以对它们在HTML中出现的位置重新排序。这将有助于用户选择正确的文本。事实上，我建议您@Kyle考虑到这一点，因为当我尝试剪辑选择时选择random

div

s时，我真的很恼火。@Sebastian考虑到各种用户选择属性，定义一个类将更有效：

。不可选择{user select:none；-moz user select:none；…}

然后写：

$（this.addClass（“unselectable”）

@Sime但是IE呢？我假设

this.unselectable=“on”；

负责管理资源管理器。否则，您完全正确。@Sebastian IE的那一行是可以的。但是这5行css（）方法应替换为addClass（）正如我所说的。@Sebastian用户选择属性使其在Firefox、Chrome和Safari中工作。不可选择属性使其在IE和Opera中工作。但是，我不知道onselectstart属性用于什么浏览器……但它没有伤害。@Šime我相信

onselectstart

也只能由IE读取，但js不是我的堡垒。

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