[解決済み] HTMLでの選択を防止する

質問

HTMLのページにdivがあるのですが、マウスを押して動かすと、何かを選択したようなカーソル("can't drop"が表示されます。選択を無効にする方法はありますか？CSSのuser-selectをnoneで試してみましたが、成功しませんでした。

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

の独自のバリエーションは user-select は、ほとんどのモダンブラウザで動作します。

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