如何防止 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"));