Verhindern Sie die Textauswahl nach einem Doppelklick

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

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 auf die Spanne für alle Nicht-IE-Browser und IE10 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:

Sie könnten MouseEvent#detailEigentum verwenden. Für Mousedown- oder Mouseup-Ereignisse ist es 1 plus die aktuelle Klickzahl.

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

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

FWIW, ich user-select: nonehabe das übergeordnete Element der untergeordneten Elemente festgelegt, die beim Doppelklicken auf das übergeordnete Element nicht ausgewählt werden sollen. Und es funktioniert! Coole Sache ist contenteditable="true", Textauswahl usw. funktioniert immer noch bei 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 Angular 2+ suchen .

Sie können die mousedownAusgabe der Tabellenzelle verwenden.

<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 ...
}

Die dblclickAusgabe funktioniert weiterhin wie erwartet.

oder auf Mozilla:

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

Auf IE,

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

Alter Thread, aber ich habe eine Lösung gefunden, die meiner Meinung nach sauberer ist, da sie nicht alle an das Objekt gebundenen Elemente deaktiviert und nur zufällige und unerwünschte Textauswahlen auf der Seite verhindert. Es ist unkompliziert und funktioniert gut für mich. Hier ist ein Beispiel; Ich möchte die Textauswahl verhindern, wenn ich mehrmals auf das Objekt mit der Klasse "Pfeil-rechts" klicke:

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

HTH!

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

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

Um IE 8 STRG und UMSCHALT zu verhindern, klicken Sie auf die Textauswahl für ein einzelnes Element

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

So verhindern Sie die Textauswahl im Dokument

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

Ich hatte das gleiche Problem. Ich habe es gelöst, indem ich zu <a>und hinzufüge onclick="return false;"(damit durch Klicken darauf kein neuer Eintrag zum Browserverlauf hinzugefügt wird).