javascript - 防止在 HTML 中选择

Question

我在 HTML 页面上有一个 div，每当我按下鼠标并移动它时，它就会显示“不能放下”光标，就像它选择了一些东西一样。有没有办法禁用选择？我尝试了没有成功的 CSS 用户选择。

Answer 1

user-select 的专有变体将适用于大多数现代浏览器:

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于 IE < 10 和 Opera，您需要使用 unselectable您希望不可选择的元素的属性。您可以使用 HTML 中的属性进行设置:

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

遗憾的是，这个属性不是继承的，这意味着你必须在 <div> 中的每个元素的开始标记中放置一个属性。 .如果这是一个问题，您可以改为使用 JavaScript 为元素的后代递归执行此操作:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));