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?

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

En clair javascript:

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

Ou avec jQuery:

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

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

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>

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

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.

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

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!

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é.

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

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