HTMLでの選択を防止する

82

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

javascript html selection

— タワー
ソース

166

の独自のバリエーションは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"));

— ティムダウン
ソース

選択されていませんが、クリップボードにコピーされています（goo.gl/5P8uHのMDC仕様による）

— ithkuil 2010年

@ithkuil：興味深い。-moz-none行く方法のように見えます。答えを修正します。

— ティムダウン

Firefox 5では、-moz-noneFirebugによってオートコンプリートされていないようnoneですが、次のとおりです。-moz-user-select: none（動作）

— Lekensteyn 2011

@Lekensteyn：どちらも選択を防ぐために機能しますが、概念的には違いがあります：developer.mozilla.org/en/CSS/-moz-user-select。ただし、Firefox 5ではこれをバックアップしていないようです：jsfiddle.net/vhwJ5/2。

— ティムダウン

私はuser-selectテキストだけを扱い、他の種類の要素は扱っていないと確信しています

— oldboy 2017年

10

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

— モロコロコ
ソース

「img」セレクターを使用できますが、「event.preventDefault（）;」には注意してください。「マウスダウン」に関連付けられていない他のイベントので...あなたのページにそれらに動作します

— molokoloco

5

cancelBubble=trueとstopPropagation()をマウスの下で使用し、ハンドラーを移動します。

— ケネベック
ソース

2

私を悩ませたのは、移動ハンドラーだけでなく、マウスダウンハンドラーと移動ハンドラーの両方で必要なことでした。

— Matthew Schinckel 2012

4

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

— 葉
ソース

これをありがとう、無効にされた値が投稿されないので、私がクリックでブロックしていた選択Iリストをブロックする適切な方法でしばらく検索しました.....

— ハハ

1

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

— Michal Ciechan
ソース