Javascript Girl
  1. Javascript Girl
  3. JavaScript: désactivez la sélection de texte via double clic
Intereting Posts
Puis-je obtenir un nom de propriété d'objet javascript qui commence par un nombre? Comment obtenir l'image gif animée à partir du presse-papiers du navigateur api? L'auditeur d'événement localStorage ne peut pas déclencher en chrome D3.js fisheye distortion on map Pouvez-vous copier une div existante dans une boîte de dialogue modal Comment renouveler un Facebook user_access_token si je traite beaucoup d'AJAX? Steam API Obtenez SteamID en utilisant Javascript Déclenchez une touche avec jQuery … et spécifiez la touche enfoncée Comparez deux tableaux multidimensionnels en javascript Comment différencier les requêtes Ajax des requêtes Http normales? Chaîne de promesses avec bluebird JavaScript: comment sérialiser un élément DOM en tant que chaîne à utiliser plus tard? Comment restreindre la taille du téléchargement d'image à moins de 2mb? Comment trier les éléments par leur valeur dans l'attribut données en utilisant JS Comment vérifier si un objet est un proxy?

JavaScript: désactivez la sélection de texte via double clic

Lorsque vous double-cliquez sur une page html, la plupart des navigateurs sélectionnent le mot sur lequel vous double-cliquez (ou le paragraphe sur lequel vous cliquez trois fois). Existe-t-il un moyen de se débarrasser de ce comportement?

Notez que je ne veux pas désactiver la sélection régulière par simple clic + traîner; C'est-à-dire $('body').disableSelection() jQuery UI $('body').disableSelection() et l'événement DOM de document.onselectstart ne sont pas ce que je veux.

Je crains que vous ne puissiez pas empêcher que la sélection soit «comportement natif» du navigateur, mais vous pouvez effacer la sélection juste après sa création: 

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

Modifier : pour empêcher également de sélectionner un paragraphe entier par «triple clic», voici le code requis: 

 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(); }​

Cas de test en direct .

Doit être un navigateur croisé, signaler tout navigateur où il ne fonctionne pas.

Il suffit de mettre cela sur la section intéressée css 

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

Si vous désirez désactiver la sélection en double-clic et non simplement en supprimant la sélection par la suite (vous paraissez laid), vous devez return false lors du deuxième événement de mousedown (ondblclick ne fonctionnera pas parce que la sélection est effectuée sur Last.fm).

** Si quelqu'un ne veut aucune sélection, la meilleure solution est d'utiliser CSS user-select : none; Comme l'a proposé Maurizio Battaghini. 

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

Démo en direct ici

Avis important: j'ai configuré la sensibilité à 500 ms, mais la sensibilité double-clic (le temps maximum entre les clics détectés en double clic) peut varier selon le système d'exploitation et le navigateur, et est souvent configurable par l'utilisateur. – api.jquery.com

Testé sur Chrome et IE11.

Ce qui suit fonctionne dans les navigateurs Chrome (v56), Firefox (v51) et MS Edge (v38) actuels. 

 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>

Juste pour jeter cela là-bas, mais voici le code que je tape sur mes pages où je m'attends à ce que les utilisateurs cliquent rapidement. Cependant, cela désactivera également la sélection de texte standard de clic-n-drag. 

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

Je semble bien fonctionner pour moi.