web-dev-qa-db-fra.com

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

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?

javascriptselection-object
269
David
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 {
    -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+ */
}
328
Paolo Bergantino

En clair javascript:

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

Ou avec jQuery:

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

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

Vous pouvez utiliser la propriété MouseEvent#detail. 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

49
4esn0k

FWIW, je règle user-select: none sur élément parent de ces éléments enfants que je ne souhaite pas, d’une manière ou d’une autre, sélectionner lorsque je double-clique n’importe où sur l’élément parent. Et il fonctionne! Ce qui est cool, c'est contenteditable="true", la 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>
16
kyw

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

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

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
4
José Leal

Vieux fil, mais j’ai trouvé une solution qui, à mon avis, est plus propre, car elle ne désactive pas tous les liens, même liés à l’objet, et empêche uniquement les sélections de texte aléatoires et indésirables sur la page. C'est simple, et fonctionne 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!

2
nncho

Pour ceux qui recherchent une solution pour Angular 2 +.

Vous pouvez utiliser la sortie mousedown de la cellule du tableau.

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

Et prévenir si le detail > 1.

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) event.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

La sortie dblclick continue de fonctionner comme prévu.

2
bvdb

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
rajesh

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

De manière comportementale, dans Chrome 68, il est hérité par des éléments enfants et ne permet pas la sélection du texte contenu d'un élément, même si un texte entourant et incluant l'élément a été sélectionné.

1
stackuser83