web-dev-qa-db-ja.com

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

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

javascriptselection-object
260
David
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 {
    -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+ */
}
320
Paolo Bergantino

プレーンjavascriptの場合：

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

またはjQueryを使用：

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

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

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 を参照してください

43
4esn0k

ページ要素内のコンテンツを選択不可にする単純な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";
  }
}
12
Daniel

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

以下のようなので：

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

または、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
4
José Leal

古いスレッドですが、オブジェクトにバインドされているすべての偶数を無効にするわけではなく、ページ上のランダムで不要なテキスト選択を防ぐだけなので、よりクリーンだと思うソリューションを思いつきました。それは簡単で、私にとってはうまくいきます。以下に例を示します。クラス「arrow-right」のオブジェクトを何度かクリックすると、テキストが選択されないようにします。

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

HTH！

2
nncho

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

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

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

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

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) event.preventDefault();
}

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

dblclick出力は、期待どおりに機能し続けます。

1
bvdb

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

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

1
stackuser83