ダブルクリック後のテキスト選択を防止

Webアプリのスパンでdblclickイベントを処理しています。副作用として、ダブルクリックでページ上のテキストが選択されます。この選択が行われないようにするにはどうすればよいですか？

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

これらのスタイルを、IE以外のすべてのブラウザとIE10のスパンに適用することもできます。

span.no_selection {
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

プレーンなJavaScriptでは：

element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

またはjQueryで：

jQuery(element).mousedown(function(e){ e.preventDefault(); });

ダブルクリック後にのみテキストが選択されないようにするには：

MouseEvent#detailプロパティを使用できます。mousedownイベントまたはmouseupイベントの場合、1に現在のクリック数を加えたものです。

document.addEventListener('mousedown', function (event) {
  if (event.detail > 1) {
    event.preventDefault();
    // of course, you still do not know what you prevent here...
    // You could also check event.ctrlKey/event.shiftKey/event.altKey
    // to not prevent something useful.
  }
}, false);

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detailを参照してください

FWIW、親要素のどこかをダブルクリックしたときに、どういうわけか選択したくない子要素の親要素に設定user-select: noneしました。そしてそれはうまくいきます！クールなことは、テキストの選択などがまだ子要素で機能することです！contenteditable="true"

以下のようなので：

<div style="user-select: none">
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
</div>

ページ要素内のコンテンツを選択不可にする単純なJavaScript関数：

function makeUnselectable(elem) {
  if (typeof(elem) == 'string')
    elem = document.getElementById(elem);
  if (elem) {
    elem.onselectstart = function() { return false; };
    elem.style.MozUserSelect = "none";
    elem.style.KhtmlUserSelect = "none";
    elem.unselectable = "on";
  }
}

Angular 2+のソリューションをお探しの方に。

mousedownテーブルセルの出力を使用できます。

<td *ngFor="..."
    (mousedown)="onMouseDown($event)"
    (dblclick) ="onDblClick($event)">
  ...
</td>

場合は防止しdetail > 1ます。

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

dblclick期待通りの出力が仕事に続きます。

または、mozillaの場合：

document.body.onselectstart = function() { return false; } // Or any html object

IEでは、

document.body.onmousedown = function() { return false; } // valid for any html object as well

古いスレッドですが、オブジェクトにバインドされているすべての偶数を無効にするのではなく、ページ上のランダムで不要なテキストの選択のみを防ぐため、よりクリーンであると私は思いました。それは簡単で、私にはうまくいきます。以下に例を示します。「右矢印」クラスのオブジェクトを数回クリックしたときにテキストが選択されないようにしたい：

$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});

HTH！

任意の方法で、またダブルクリックでのみテキストを選択しないようにする場合は、user-select: nonecss属性を使用できます。私はChrome 68でテストしましたが、https：//caniuse.com/#search=user-selectによると、それは他の現在の通常のユーザーのブラウザーで動作するはずです。

動作上、Chrome 68では子要素によって継承され、要素を囲むテキストを含むテキストが選択された場合でも、要素に含まれるテキストを選択できませんでした。

IE 8のCTRLおよびSHIFTを防ぐには、個々の要素のテキスト選択をクリックします

var obj = document.createElement("DIV");
obj.onselectstart = function(){
  return false;
}

ドキュメントでテキストが選択されないようにするには

window.onload = function(){
  document.onselectstart = function(){
    return false;
  }
}

同じ問題がありました。に切り替えて<a>追加することで解決しましたonclick="return false;"（クリックするとブラウザの履歴に新しいエントリが追加されません）。