Wie kann ich die Auswahl von Text / Elementen durch Ziehen des Cursors verhindern?

Ich habe ein Paging-Steuerelement erstellt und festgestellt, dass es beim Klicken auf die Schaltflächen sehr einfach ist, versehentlich die einzelnen Bilder und Texte auszuwählen. Kann man das verhindern?

Zur Verdeutlichung der Auswahl meine ich das Hervorheben mit der Maus. (Ziehen Sie die Maus von einer Seite des Bildschirms zur anderen.)

Wenn Sie versuchen, den Text / die Steuerelemente in diesem Raster hervorzuheben, kann er nicht ausgewählt werden. Wie geht das? Verknüpfung

Ziehen und Auswählen sowohl bei einem Maus-Down-Ereignis initialisieren als auch bei nachfolgenden Mausbewegungen aktualisieren. Wenn Sie die Ereignisse bearbeiten, um mit dem Ziehen zu beginnen oder der Maus zu folgen, brechen Sie das Sprudeln des Ereignisses ab und überschreiben Sie die Standard-Browser-Rückgabe:

so etwas in deinem fang an, mousedown zu ziehen und handler zu bewegen-

e=e || window.event;
pauseEvent(e);

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Zum Ziehen erfassen Sie die Ereignisse mousedownund mousemove. (Und hoffentlich touchstartund touchmoveVeranstaltungen sowie zur Unterstützung Touch - Interfaces.)

Sie müssen event.preventDefault()sowohl die downals auch die moveEreignisse aufrufen , damit der Browser keinen Text auswählt.

Zum Beispiel (mit jQuery):

var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
  event.preventDefault();
  mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
  event.preventDefault();
  if(mouseDown) {
    // Do something here.
  }
});
$(window.document).on('mouseup touchend', function(event) {
  // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
  mouseDown = false;
});

Dies ist ein sehr alter Beitrag. Es kann nicht genau diese Situation beantworten, aber ich benutze CSS für meine Lösung:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Ich wollte einen Kommentar abgeben, aber ich habe nicht genug Ruf. Die Verwendung der vorgeschlagenen Funktion von @kennebec löste mein Problem in meiner Javascript-Dragging-Bibliothek. Es funktioniert einwandfrei.

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Ich habe es in meiner benutzerdefinierten Mousedown- und Mousemove-Funktion aufgerufen, unmittelbar nachdem ich erkannt habe, dass ich auf das richtige Element geklickt habe. Wenn ich es nur über der Funktion aufrufe, töte ich einfach jeden Klick auf das Dokument. Meine Funktion ist als Ereignis auf document.body registriert.

Versuche dies:

document.onselectstart = function()
{
    window.getSelection().removeAllRanges();
};

Dies kann mithilfe von CSS in den meisten Browsern und der unselectableErweiterung im IE erreicht werden. Siehe meine Antwort hier: Wie deaktiviere ich die Hervorhebung der Textauswahl mithilfe von CSS?

Verhindern Sie dies einfach, indem Sie die Funktion blur () aufrufen, wenn Sie Folgendes auswählen:

 <input Value="test" onSelect="blur();">

Wenn Sie die Textauswahl für ein bestimmtes Element mithilfe von JavaScript blockieren müssen, war es für mich die einfachste Methode, den userSelect-Stil wie folgt zuzuweisen:

var myElement = document.createElement('div');
myElement.style.userSelect = 'none';