カーソルのドラッグでテキスト/要素の選択を防止するには

Question

ページングコントロールを作成しましたが、ボタンをクリックしている間に個々の画像やテキストを誤って選択するのは非常に簡単です。これを防ぐことはできますか？

選択を明確にするために、私はマウスでハイライトを意味します。

このグリッドでテキスト/コントロールを強調表示しようとすると、選択できません。それはどうですか？ Link

Answer 1

マウスダウンイベントでの初期化と後続のマウスの動きでの更新の両方をドラッグして選択する。あなたはドラッグを開始するために、またはマウスに従うように、イベントのバブリングをキャンセルし、デフォルトのブラウザの復帰を上書きするイベントを処理する場合：このような

何かがあなたの中でマウスダウンをドラッグし始めると

e=e || window.event; 
pauseEvent(e); 

をhandlers-移動します

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
} 

Answer 2

はこれを試してみてください。

document.onselectstart = function() 
{ 
    window.getSelection().removeAllRanges(); 
}; 

Answer 3

これは、ほとんどのブラウザとIEでunselectableはExpandoにCSSを使用して達成することができます。ここで私の答えを参照してください：How to disable text selection highlighting using CSS?

Answer 4

私はコメントしたかったが、評判が足りませんでした。 @kennebecからの示唆された機能を使用すると、私のJavaScriptのドラッグライブラリの問題が解決しました。 それは完璧に動作します。

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
} 

私は右の要素をクリック認識することができた直後に、私のマウスダウンとのMouseMoveカスタム機能でそれを呼びました。私は関数の上にちょうどそれを呼び出す場合は、私はちょうど文書の任意のクリックを殺す。 私の関数はdocument.bodyにイベントとして登録されています。

Answer 5

ドラッグする場合は、mousedownとmousemoveというイベントをキャプチャしています。 （そして、うまくいけばtouchstartとtouchmoveイベントだけでなく、タッチインターフェイスをサポートします。）

は、テキストを選択すると、ブラウザを保つために、両方のdownとmoveイベントでevent.preventDefault()を呼び出す必要があります。 （jQueryのを使用して）例えば

：

var mouseDown = false; 
$(element).on('mousedown touchstart', function(event) { 
    event.preventDefault(); 
    mouseDown = true; 
}); 
$(element).on('mousemove touchmove', function(event) { 
    event.preventDefault(); 
    if(mouseDown) { 
    // Do something here. 
    } 
}); 
$(window.document).on('mouseup touchend', function(event) { 
    // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element. 
    mouseDown = false; 
}); 

Answer 6

単に次のように選択したときにぼかし（）関数を呼び出すことによってそれを防ぐ：

<input Value="test" onSelect="blur();"> 

Answer 7

あなたが特定の要素のテキストの選択をブロックする必要がある場合JavaScriptを使用すると、私にとって最も簡単な方法は、次のようにuserSelectスタイルを割り当てることでした：

var myElement = document.createElement('div'); 
myElement.style.userSelect = 'none';