Empêcher la sélection de texte après un double-clic


294

Je gère l'événement dblclick sur une durée dans mon application Web. Un effet secondaire est que le double-clic sélectionne du texte sur la page. Comment puis-je empêcher cette sélection de se produire?

Réponses:


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

Vous pouvez également appliquer ces styles à la plage pour tous les navigateurs non IE et IE10:

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

44
Existe-t-il un moyen d'empêcher la sélection par opposition à la supprimer après coup? De plus, votre deuxième instruction if pourrait être à l'intérieur de else if pour une meilleure lisibilité.
David

8
Il est préférable d'utiliser le préfixe -webkit- (c'est le préfixe préféré pour les navigateurs Webkit) en plus de -moz- (et -khtml- si vous avez une grande audience Konqueror).
paupières

3
Ceci est maintenant disponible dans IE10 comme -ms-user-select: none;voir blogs.msdn.com/b/ie/archive/2012/01/11/… @PaoloBergantino
lemon

1
@TimHarper: En ce qui concerne les solutions Javascript utilisant une bibliothèque, bien sûr. Je ne sais pas vraiment pourquoi cela justifie un downvote.
Paolo Bergantino

14
Il y a une différence entre désactiver la sélection au double-clic et la désactiver complètement. Le premier augmente la convivialité. Le second diminue.
Robo Robok

112

En clair javascript:

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

Ou avec jQuery:

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

26
Oui, je l'ai utilisé pour résoudre le même problème que j'avais (+1), sauf au lieu d'être return falseutilisé event.preventDefault()qui ne tue aucun autre gestionnaire que vous pourriez avoir lors du mousedown.
Simon East

2
Cela rompt les éléments de zone de texte sur la page :(
john ktejik

1
@johnktejik uniquement s'il elements'agit d'une zone de texte, oui.
fregante

11
S'attendrait à ce que ce gestionnaire d'événements soit affecté à "dblclick" - mais cela ne fonctionne pas, ce qui est tellement bizarre. Avec "mousedown", vous êtes bien sûr également empêché de sélectionner du texte en le faisant glisser.
corwin.amber

74

Pour empêcher la sélection de texte UNIQUEMENT après un double-clic:

Vous pouvez utiliser une MouseEvent#detailpropriété. Pour les événements mousedown ou mouseup, il s'agit de 1 plus le nombre de clics actuel.

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

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


4
C'est génial! Fonctionne dans Firefox 53.
Zaroth

6
Ce devrait être la réponse acceptée. Tout le reste ici empêche toute sélection de souris (ou pire) au lieu de répondre à la question d'OP " Empêcher la sélection de texte après un double clic "
billynoah

1
Fonctionne également dans Chrome
KS74

1
Fonctionne également sur IE 11 Windows 10 =). Merci de partager cela.
Fernando Vieira

Utilisez (event.detail === 2)pour vraiment empêcher SEULEMENT le double-clic (et non le triple-clic, etc.)
Robin Stewart

32

FWIW, j'ai défini user-select: nonel' élément parent de ces éléments enfants que je ne veux pas sélectionner d'une manière ou d'une autre lorsque vous double-cliquez n'importe où sur l'élément parent. Et il fonctionne! Ce qui est cool, c'est que la contenteditable="true"sélection de texte, etc. fonctionne toujours sur les éléments enfants!

Alors comme:

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

Merci, poivrer style="user-select: note"partout a trié le problème que j'essayais de résoudre :)
esaruoho

Belle solution CSS uniquement pour les cas où vous ne voulez pratiquement jamais que le texte soit sélectionnable. Merci!
Ian Lovejoy

11

Une simple fonction Javascript qui rend le contenu à l'intérieur d'un élément de page non sélectionnable:

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

4

Pour ceux qui recherchent une solution pour Angular 2+ .

Vous pouvez utiliser la mousedownsortie de la cellule du tableau.

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

Et éviter si le 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 ...
}

La dblclicksortie continue de fonctionner comme prévu.


3

ou, sur mozilla:

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

Sur IE,

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

5
Cette sollution ne permet pas du tout de sélectionner du texte.
jmav

1
@jmav Vous devrez appliquer les remplacements de fonction sur un élément plus spécifique que document.body.
Cypher

2

Ancien thread, mais j'ai trouvé une solution qui, je pense, est plus propre car elle ne désactive pas toutes les paires liées à l'objet et empêche uniquement les sélections de texte aléatoires et indésirables sur la page. C'est simple et ça marche bien pour moi. Voici un exemple; Je veux empêcher la sélection de texte lorsque je clique plusieurs fois sur l'objet avec la classe "flèche droite":

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

HTH!


1

Si vous essayez d'empêcher complètement la sélection de texte par n'importe quelle méthode ainsi que sur un double-clic uniquement, vous pouvez utiliser l' user-select: noneattribut css. J'ai testé dans Chrome 68, mais selon https://caniuse.com/#search=user-select, cela devrait fonctionner dans les autres navigateurs utilisateur normaux actuels.

Comportemental, dans Chrome 68, il est hérité par les éléments enfants et ne permettait pas de sélectionner le texte contenu d'un élément même si le texte entourant et incluant l'élément était sélectionné.


0

Pour empêcher IE 8 CTRL et SHIFT, cliquez sur la sélection de texte sur un élément individuel

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

Pour empêcher la sélection de texte sur le document

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

-2

J'ai eu le même problème. Je l'ai résolu en basculant vers <a>et en ajoutant onclick="return false;"(de sorte que cliquer dessus n'ajoutera pas une nouvelle entrée à l'historique du navigateur).

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.