Zapobiegaj zaznaczaniu tekstu po podwójnym kliknięciu

Obsługuję zdarzenie dblclick w zakresie w mojej aplikacji internetowej. Efektem ubocznym jest to, że podwójne kliknięcie zaznacza tekst na stronie. Jak mogę zapobiec tej selekcji?

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

Możesz także zastosować te style do zakresu dla wszystkich przeglądarek innych niż IE i 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+ */
}

Prostym javascript:

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

Lub z jQuery:

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

Aby zapobiec zaznaczaniu tekstu TYLKO po podwójnym kliknięciu:

Możesz użyć MouseEvent#detailnieruchomości. W przypadku zdarzeń mousedown lub mouseup jest to 1 plus bieżąca liczba kliknięć.

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

Zobacz https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

FWIW, zestaw user-select: nonedo elementu nadrzędnego tych elementów podrzędnych, które nie chcę jakoś wybrany, gdy podwójne kliknięcie w dowolnym miejscu elementu nadrzędnego. I to działa! Fajne jest to contenteditable="true", że zaznaczanie tekstu itp. Nadal działa na elementach potomnych!

Tak jak:

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

Prosta funkcja JavaScript, która sprawia, że ​​zawartość wewnątrz elementu strony jest niemożliwa do wybrania:

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";
  }
}

Dla tych, którzy szukają rozwiązania dla Angular 2+ .

Możesz użyć danych mousedownwyjściowych komórki tabeli.

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

I zapobiec, jeśli 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 ...
}

Dane dblclickwyjściowe nadal działają zgodnie z oczekiwaniami.

lub na mozilli:

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

W IE

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

Stary wątek, ale wymyśliłem rozwiązanie, które moim zdaniem jest czystsze, ponieważ nie wyłącza wszystkich równych wiązań z obiektem, a jedynie zapobiega losowym i niechcianym zaznaczeniom tekstu na stronie. To jest proste i działa dobrze dla mnie. Oto przykład; Chcę zapobiec zaznaczaniu tekstu, gdy kliknę kilka razy na obiekcie klasą „strzałka w prawo”:

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

HTH!

Jeśli próbujesz całkowicie zapobiec zaznaczaniu tekstu dowolną metodą, a także tylko podwójnym kliknięciem, możesz użyć user-select: noneatrybutu css. Testowałem w Chrome 68, ale zgodnie z https://caniuse.com/#search=user-select powinien on działać w innych przeglądarkach zwykłych użytkowników.

Zachowawczo, w Chrome 68 jest dziedziczony przez elementy potomne i nie pozwalał na zaznaczenie tekstu zawierającego element, nawet jeśli zaznaczono tekst otaczający i obejmujący element.

Aby zapobiec IE 8 CTRL i SHIFT, kliknij zaznaczanie tekstu na poszczególnych elementach

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

Aby zapobiec zaznaczaniu tekstu w dokumencie

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

Miałem ten sam problem. Rozwiązałem go, przełączając się na <a>i dodając onclick="return false;"(aby kliknięcie go nie dodawało nowego wpisu do historii przeglądarki).