Textauswahl nach Doppelklick verhindern

Ich behandle das dblclick-Ereignis auf einer Spanne in meiner Web-App. Ein Nebeneffekt ist, dass der Doppelklick Text auf der Seite auswählt. Wie kann ich diese Auswahl verhindern?

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

Sie können diese Stile auch für alle Nicht-IE-Browser und IE10 auf den Span anwenden:

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

In einfachem Javascript:

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

Oder mit jQuery:

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

So verhindern Sie die Textauswahl NUR nach einem Doppelklick:

Du könntest benutzen MouseEvent#detail Eigentum. Für Mousedown- oder Mouseup-Ereignisse ist es 1 plus die aktuelle Klickanzahl.

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

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

FWIW, habe ich eingestellt user-select: none zum übergeordnetes Element dieser untergeordneten Elemente, die ich nicht irgendwie ausgewählt haben möchte, wenn ich irgendwo auf das übergeordnete Element doppelklicke. Und es funktioniert! Coole Sache ist contenteditable="true", Textauswahl usw. funktioniert immer noch auf den untergeordneten Elementen!

So wie:

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

Eine einfache Javascript-Funktion, die den Inhalt eines Seitenelements nicht auswählbar macht:

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

Für diejenigen, die eine Lösung für suchen Eckig 2+.

Du kannst den … benutzen mousedown Ausgabe der Tabellenzelle.

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

Und verhindern, wenn die 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 ...
}

Der dblclick Die Ausgabe funktioniert weiterhin wie erwartet.

Wenn Sie versuchen, das Auswählen von Text mit irgendeiner Methode sowie nur mit einem Doppelklick vollständig zu verhindern, können Sie die verwenden user-select: none CSS-Attribut. Ich habe in Chrome 68 getestet, aber gem https://caniuse.com/#search=user-select es sollte in den anderen aktuellen normalen Benutzerbrowsern funktionieren.

In Chrome 68 wird es verhaltensmäßig von untergeordneten Elementen geerbt und erlaubte nicht, den enthaltenen Text eines Elements auszuwählen, selbst wenn Text ausgewählt wurde, der das Element umgibt und einschließt.