[解決済み] HTMLページでテキストを非選択にする方法はありますか？重複

質問

私は、タブ名など、選択すると見栄えが悪くなるテキスト要素を含む HTML UI を構築しています。残念ながら、ユーザーがタブ名をダブルクリックすることは非常に簡単で、多くのブラウザーでデフォルトで選択されます。

JavaScript のトリックでこれを解決できるかもしれませんが (その回答も見てみたいです)、すべてのブラウザにわたって機能する CSS/HTML の直接の何かがあることを本当に期待しています。

どのように解決するのですか?

ほとんどのブラウザで、CSSを使用して実現できます。

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

IE < 10とOperaの場合、以下のように unselectable 属性で、選択不可能にしたい要素を指定します。HTMLの属性を使って設定することができます。

<div id="foo" unselectable="on" class="unselectable">...</div>

悲しいことに、このプロパティは継承されません。 <div> . もしこれが問題なら、代わりに JavaScript を使って、要素の子孫に対して再帰的にこれを行うことができます。

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"));