カーソルドラッグでテキスト/要素が選択されないようにするにはどうすればよいですか

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

選択を明確にするために、私はマウスで強調表示することを意味します。（画面の片側から反対側にマウスをドラッグしてみてください。）

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

ドラッグして選択すると、マウスダウンイベントで初期化され、その後のマウス移動で更新されます。イベントを処理してドラッグを開始するか、マウスを追跡する場合は、イベントのバブリングをキャンセルし、デフォルトのブラウザリターンを上書きします。

このようなもので、マウスを下にドラッグしてハンドラーを移動し始めます-

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

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

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

ブラウザがテキストを選択しないようにするにevent.preventDefault()はdown、moveイベントとイベントの両方を呼び出す必要があります。

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

これは非常に古い投稿です。それはその状況に正確に答えないかもしれませんが、私は私の解決策にCSSを使用しています：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

コメントしたかったのですが、評判がよくありません。@kennebecから提案された関数を使用すると、JavaScriptドラッグライブラリの問題が解決しました。それは完璧に動作します。

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

右の要素をクリックしたことを認識した直後に、mousedownおよびmousemoveカスタム関数で呼び出しました。関数のすぐ上で呼び出すと、ドキュメントのクリックをすべて強制終了します。私の関数はdocument.bodyにイベントとして登録されています。

これを試して：

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

これは、ほとんどのブラウザーでCSSを使用しunselectable、IEでexpandoを使用して実現できます。ここで私の答えを参照してください：CSSを使用してテキスト選択の強調表示を無効にする方法は？

次のように選択したときにblur（）関数を呼び出すことで、それを防ぐだけです。

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

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

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