如何防止 HTML 页面上的文本选择？

取消选择 HTML 页面上的文本：综合指南

在用户体验领域，最好防止在 HTML 页面上选择文本HTML 页面中的某些元素。这对于选项卡名称等元素尤其重要，这些元素在突出显示时可能显得毫无吸引力。

CSS 解决方案

幸运的是，大多数现代浏览器都提供基于 CSS 的解决方案：

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

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

只需将此代码添加到您的样式表中，指定的元素就会变成不可选择。

IE 和 Opera 替代方案

对于早期版本的 Internet Explorer 和 Opera，可以使用不可选择属性：

<div>
<p>但是，请注意，该属性不是继承的，因此您可能需要为每个后代显式设置它</p>
<p><strong>递归 JavaScript 解决方案</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"));