如何在 HTML UI 中禁用文本选择？

禁用文本选择以增强 UI 体验

设计 HTML 用户界面时，某些文本元素（如选项卡名称）在选择时可能看起来不合需要。为了防止这种情况，请考虑实施以下方法之一。

CSS 解决方案

对于大多数浏览器，以下 CSS 样式可能会使文本无法选择：

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

IE 和 Opera 的 HTML 属性

对于IE（版本 10 以下）和 Opera 等浏览器，请使用不可选择属性：

<div>
<p><strong>JavaScript Recursion for Extreaching Unselectable Areas</strong></p>
<p>对于涉及嵌套的情况，使用 JavaScript 递归设置不可选择的属性：</p>
<pre class="brush:php;toolbar:false">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"));