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