如何使用 CSS 和 JavaScript 禁用 HTML 元素上的文本选择？

禁用 HTML 页面上的文本选择：探索 CSS 和 JavaScript 解决方案

在 Web 开发领域，为用户提供无缝导航体验至关重要。然而，有时默认的浏览器行为可能会阻碍这一目标。其中一个障碍是用户双击时自动选择文本，特别是选项卡名称等元素。为了解决这个问题，开发人员经常寻找禁用文本选择的方法。

CSS 解决方案：不可选择文本的样式

在各种浏览器中，CSS 提供了禁用文本选择的全面解决方案。通过将特定的样式规则应用于所需的元素，开发人员可以阻止默认的突出显示行为。以下 CSS 代码示例可实现此效果：

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

HTML 属性：不可选择的元素

对于 Internet Explorer 10 之前的版本和 Opera 等浏览器，HTML 属性提供了另一种方法。通过将不可选择属性设置为“on”，开发人员可以将特定元素指定为不可选择。

<div>
<p>但是，需要注意的是，该属性不是继承的，因此需要将其应用到容器内的每个单独元素</p>
<div>.要为后代自动化此过程，可以使用 JavaScript：<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"));

通过利用这些 CSS 和 HTML/JavaScript 技术，开发人员可以有效地禁用 HTML 页面中特定元素的文本选择，从而增强用户体验和保持视觉上有凝聚力的设计。