Question

我们有一个项目，我们是否禁用所有正文内容的文本选择。因此，解决方案是普通浏览器的CSS样式（如user-select: none）和IE的解决方法（如document.body.onselectstart = function () { return false; }）。

所以问题是：如何在IE中的某些div元素中启用文本选择？如何简单快速地做到这一点？

Answer 1

嗯，最简单的方法是颠倒你的逻辑，只将这个规则应用于那些不应该选择文本的元素。将此规则应用于整个主体的问题是，任何子元素都已经从其父（body）元素接收到此重写事件，并且重新初始化onselectstart事件的方式并不像某些人看起来那么容易在这里假设他们的答案。在您的情况下，我将删除整个正文的此规则，然后仅将其应用于没有任何子项的单个元素，其中不能应用覆盖规则。

示例：

<body> this is some text that is selectable <div style='-o-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -ms-user-select: none; user-select: none;' onselectstart='return false;' unselectable='on'> this is some text that's not selectable </div> </body>

＆gt; 查看 JSFiddle
上的工作演示

请注意，列出的某些单独属性尚未受支持，我已将其添加，以备将来验证。编译规则集的方式是支持尽可能多的不同浏览器。有些人会服从CSS样式，有些需要JavaScript黑客（IE＆lt; 10），Opera浏览器服从特殊的元素属性（见下文）。

编辑：添加了对Opera浏览器的支持（unselectable='on'）

Answer 2

<div onselectstart='return true;'>blablabla</div>

Answer 3

    document.body.onselectstart = function (event) {
    if(event.srcElement.parentNode.id == 'mydiv')//you may need to loop if the parentNode is 
    {                                            //not a div element
        return true;
    }
    else{
        return false;
    }
 }

注意：禁用javascript会让用户选择文字

我更新了小提琴link

Answer 4

使用jQuery

$("body").disableSelection();

在IE中禁用/启用文本选择

4 个答案: