Comment puis-je empêcher la sélection de texte/élément avec le glissement du curseur

Question

J'ai fait un contrôle de pagination et j'ai remarqué qu'en cliquant sur les boutons, il est très facile de sélectionner accidentellement les images et le texte individuels. Est-il possible d'empêcher cela?

Pour clarifier la sélection, je veux dire surligner avec la souris. (Essayez de faire glisser votre souris d'un côté de l'écran à l'autre.)

Si vous essayez de mettre en surbrillance le texte/les commandes dans cette grille, il ne peut pas être sélectionné. Comment ça se fait ? Relier

Answer 1

en faisant glisser et en sélectionnant à la fois initialiser sur un événement de souris enfoncée et mettre à jour sur les mouvements de souris suivants. Lorsque vous gérez les événements pour commencer à faire glisser ou pour suivre la souris, annulez le bouillonnement de l'événement et remplacez le retour par défaut du navigateur :

quelque chose comme ça dans votre commencer à faire glisser la souris vers le bas et déplacer les gestionnaires-

 e=e || window.event;
pauseEvent(e);

 function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Answer 2

Pour faire glisser, vous capturez les événements mousedown et mousemove (Et si touchstart et touchmove également, pour prendre en charge les interfaces tactiles.)

Vous devrez appeler event.preventDefault() dans les down et move afin d'empêcher le navigateur de sélectionner du texte.

Par exemple (en utilisant jQuery) :

 var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
  event.preventDefault();
  mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
  event.preventDefault();
  if(mouseDown) {
    // Do something here.
  }
});
$(window.document).on('mouseup touchend', function(event) {
  // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
  mouseDown = false;
});

Answer 3

C'est un très vieux post. Cela ne répond peut-être pas exactement à cette situation, mais j'utilise CSS pour ma solution :

 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Answer 4

Je voulais commenter, mais je n'ai pas assez de réputation. L'utilisation de la fonction suggérée de @kennebec a résolu mon problème dans ma bibliothèque de déplacement javascript. Cela fonctionne impeccablement.

 function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Je l'ai appelé dans ma fonction personnalisée mousedown et mousemove, immédiatement après avoir pu reconnaître que j'ai cliqué sur le bon élément. Si je l'appelle juste au-dessus de la fonction, je tue tout clic sur le document. Ma fonction est enregistrée en tant qu'événement sur document.body.

Answer 5

essaye ça:

 document.onselectstart = function()
{
    window.getSelection().removeAllRanges();
};