web-dev-qa-db-ja.com

HTMLでの選択を禁止

HTMLページにdivがあり、マウスを押して移動すると、何かを選択するように「ドロップできない」カーソルが表示されます。選択を無効にする方法はありますか？成功せずにCSSのユーザー選択を試してみました。

javascripthtmlselection
78
Tower

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"));
158
Tim Down

CSSのユーザー選択は、画像のドラッグアンドドロップを妨げないようです...そう..

HTML

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

JS：

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});
10
molokoloco

マウスダウンで_cancelBubble=true_およびstopPropagation()を使用し、ハンドラーを移動します。

5
kennebec

event.preventDefault()はトリックを行うようです（IE7-9およびChromeでテスト済み）：

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});
4
leaf

あなたが選んだある種の透明な画像を持っていますか？通常、画像をドラッグすると「カントドロップ」アイコンが表示されます。それ以外の場合、通常はドラッグ時にテキストが選択されます。その場合、z-indexを使用してすべての背後に画像を配置する必要があります。

1
Michal Ciechan