Çift tıklamadan sonra metin seçimini önleme

Web uygulamamdaki bir yayında dblclick olayını kullanıyorum. Bir yan etki, çift tıklamanın sayfadaki metni seçmesidir. Bu seçimin gerçekleşmesini nasıl önleyebilirim?

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

Bu stilleri tüm IE olmayan tarayıcılar ve IE10 için yayılma alanına da uygulayabilirsiniz:

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+ */
}

Düz javascriptte:

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

Veya jQuery ile:

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

SADECE çift tıklamanın ardından metin seçimini önlemek için:

MouseEvent#detailMülkü kullanabilirsiniz . Fareyle üzerine gelme veya fare ile oynama olayları için, 1 artı mevcut tıklama sayısıdır.

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

Bkz. Https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

FWIW, ben set user-select: noneiçin üst öğesine ben bir şekilde üst elemana zaman çift tıklandığında hiçbir yerinde seçilmesini istediğiniz olmayanları alt öğelerin. Ve çalışıyor! Güzel olan şey contenteditable="true", metin seçimi vb. Hala alt öğeler üzerinde çalışıyor!

Gibi:

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

Bir sayfa öğesinin içindeki içeriği seçilemez yapan basit bir Javascript işlevi:

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+ için çözüm arayanlar için .

mousedownTablo hücresinin çıktısını kullanabilirsiniz .

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

Ve önlemek 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 ...
}

dblclickBeklendiği gibi çıktı çalışmalarına devam ediyor.

veya mozillada:

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

IE'de,

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

Eski iş parçacığı, ancak nesneye bağlı her çift devre dışı bırakmaz ve sadece sayfadaki rastgele ve istenmeyen metin seçimlerini engellemediğinden daha temiz olduğuna inandığım bir çözüm buldum. Çok basit ve benim için iyi çalışıyor. İşte bir örnek; "Ok-sağ" sınıfı ile nesneyi birkaç kez tıklattığınızda metin seçimini önlemek istiyorum:

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

HTH!

Herhangi bir yöntemle ve yalnızca çift tıklamayla metin seçimini tamamen önlemeye çalışıyorsanız, user-select: nonecss özniteliğini kullanabilirsiniz . Chrome 68'de test ettim, ancak https://caniuse.com/#search=user-select'e göre mevcut diğer normal kullanıcı tarayıcılarında çalışması gerekir.

Davranışsal olarak, Chrome 68'de alt öğeler tarafından devralınır ve öğeyi çevreleyen ve öğeyi içeren metin seçilse bile bir öğenin içerdiği metnin seçilmesine izin vermedi.

IE 8 CTRL ve SHIFT'i önlemek için tek tek öğedeki metin seçimini tıklatın

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

Belgedeki metin seçimini önlemek için

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

Ben de aynı problemi yaşadım. Geçiş yaparak <a>ve ekleyerek çözdüm onclick="return false;"(böylece tıklamak tarayıcı geçmişine yeni bir giriş eklemeyecek).