JavaScript: Deaktivieren der Textauswahl per Doppelklick

Question

Wenn Sie auf eine HTML-Seite doppelklicken, wählen die meisten Browser das Wort aus, auf das Sie doppelklicken (oder auf den Absatz, auf den Sie dreifach klicken). Gibt es eine Möglichkeit, dieses Verhalten loszuwerden?

Beachten Sie, dass ich die normale Auswahl nicht durch einfaches Klicken + Ziehen deaktivieren möchte; d. h. jQuery UI $('body').disableSelection() und das document.onselectstart DOM-Ereignis sind nicht was ich will.

Answer 1

Ich fürchte, Sie die Auswahl nicht verhindern kann sich „native Verhalten“ des Browsers zu sein, aber Sie können die Auswahl an klar, nachdem es gemacht hat:

<script type="text/javascript"> 
document.ondblclick = function(evt) { 
    if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
    else if (document.selection) 
     document.selection.empty(); 
} 
</script> 

bearbeiten: auch die Auswahl ganz zu verhindern Absatz von "triple Klick", hier ist der erforderliche Code:

var _tripleClickTimer = 0; 
var _mouseDown = false; 

document.onmousedown = function() { 
    _mouseDown = true; 
}; 

document.onmouseup = function() { 
    _mouseDown = false; 
}; 

document.ondblclick = function DoubleClick(evt) { 
    ClearSelection(); 
    window.clearTimeout(_tripleClickTimer); 

    //handle triple click selecting whole paragraph 
    document.onclick = function() { 
     ClearSelection(); 
    }; 

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000); 
}; 

function RemoveDocumentClick() { 
    if (!_mouseDown) { 
     document.onclick = null; 
     return true; 
    } 

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000); 
    return false; 
} 

function ClearSelection() { 
    if (window.getSelection) 
     window.getSelection().removeAllRanges(); 
    else if (document.selection) 
     document.selection.empty(); 
}​ 

Live test case.

Sollte Cross-Browser sein, melden Sie bitte jeden Browser, wo es nicht funktioniert.

Answer 2

Nur um das hier raus zu werfen, aber hier ist der Code, den ich auf meine Seiten gebe, wo ich erwarte, dass Benutzer schnell klicken. Dadurch wird jedoch auch die standardmäßige Click-n-Drag-Textauswahl deaktiviert.

document.body.onselectstart = function() { 
    return false; 
} 
document.body.style.MozUserSelect = "none"; 
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) { 
    document.body.onmousedown = function() { 
     return false; 
    } 
} 

Scheint gut für mich zu arbeiten.

Answer 3

diese einfach auf den CSS-Abschnitt

-moz-user-select  : none; 
-khtml-user-select : none; 
-webkit-user-select : none; 
-o-user-select  : none; 
user-select   : none; 

Answer 4

Wenn Sie wirklich wollen deaktivieren Auswahl auf einen Doppelklick auf und nicht nur entfernen Sie die Auswahl danach interessiert setzen (schaut zu mir hässlich), müssen Sie return false im zweiten mousedown-Ereignis (ondblclick funktioniert nicht, da die Auswahl auf mousedown erfolgt).

** Wenn jemand keine Auswahl haben möchte, ist die beste Lösung, CSS user-select : none; wie Maurizio Battaghini vorgeschlagen.

// set to true if you want to disable also the triple click event 
// works in Chrome, always disabled in IE11 
var disable_triple_click = true; 

// set a global var to save the timestamp of the last mousedown 
var down = new Date().getTime(); 
var old_down = down; 

jQuery(document).ready(function($) 
{ 
    $('#demo').on('mousedown', function(e) 
    { 
     var time = new Date().getTime(); 

     if((time - down) < 500 && 
     (disable_triple_click || (down - old_down) > 500)) 
     { 
      old_down = down; 
      down = time; 

      e.preventDefault(); // just in case 
      return false; // mandatory 
     } 

     old_down = down; 
     down = time; 
    }); 
}); 

Live demo here

Wichtiger Hinweis: I die Empfindlichkeit auf 500 ms gesetzt, aber Doppelklick Empfindlichkeit (maximale Zeit zwischen Klicks, die als Doppelklick erkannt wird) durch das Betriebssystem variieren und Browser und ist oft benutzerkonfigurierbar. - api.jquery.com

Getestet in Chrome und IE11.

Answer 5

Folgendes funktioniert für mich in den aktuellen Browsern Chrome (v56), Firefox (v51) und MS Edge (v38).

var test = document.getElementById('test'); 
 
test.addEventListener('mousedown', function(e){ 
 
    if (e.detail > 1){ 
 
     e.preventDefault(); 
 
    } 
 
});

<p id="test">This is a test area</p>

Die MouseEvent.detail Eigenschaft verfolgt die current click count, die verwendet werden können, um zu bestimmen, ob das Ereignis ein Doppel-, Drei oder mehr Klick.

Der Internet Explorer setzt den Zähler nach einer Zeitüberschreitung leider nicht zurück. Anstatt eine Anzahl von Burst-Klicks zu erhalten, wird gezählt, wie oft der Benutzer geklickt hat, seit die Seite geladen wurde.