Comment détecter un glissement de souris en JavaScript

Travailler avec des événements de souris est l’un des cas d’utilisation les plus élémentaires de JavaScript. La détection des clics est triviale, mais cela devient un peu plus compliqué lorsque vous essayez de différencier les événements de clic et de glissement. Espérons que les exemples de code ci-dessous vous orienteront dans la bonne direction pour votre projet.

Identifier un glissement de souris par rapport à un clic de souris

La détection d’un glissement de souris nécessitera l’utilisation de trois événements de souris différents, mousedown, mousemoveet mouseup. Examinons un exemple de code, puis décomposons-le.

let drag = false

let downListener = () => {
	drag = false
}

let moveListener = () => {
	drag = true
}

let upListener = () => {
	if (drag) {
  	console.log('Drag Detected')
  } else {
  	console.log('Click Detected')
  }
}


window.addEventListener('mousedown', downListener)
window.addEventListener('mousemove', moveListener)
window.addEventListener('mouseup', upListener)
      
        Copied  
        
      
    

L’idée est très simple :

• Créez une variable booléenne qui stockera l’état de glissement entre les clics
• Au clic de la souris, effacez le booléen
• Au déplacement de la souris, définissez le booléen sur vrai
• Sur la souris, vérifiez le booléen. Si vrai, la souris a été déplacée ; si faux, il a juste été cliqué.

Le code ci-dessus définit les écouteurs d’événement sur toute la fenêtre visible, mais vous pouvez également simplement définir les écouteurs sur un élément spécifique.

let element = document.getElementById('some_element')

element.addEventListener('mousedown', downListener)
element.addEventListener('mousemove', moveListener)
element.addEventListener('mouseup', upListener)
      
        Copied  
        
      
    

Vérifiez JSFiddle si vous voulez jouer avec le code.

Dans de nombreux cas, il peut également être nécessaire de libérer ou de supprimer les écouteurs d’événement. C’est très simple.

window.removeEventListener('mousedown', downListener)
window.removeEventListener('mousemove', moveListener)
window.removeEventListener('mouseup', upListener)
      
        Copied  
        
      
    

Définir un seuil de déplacement de la souris

Le code ci-dessus détectera bien un glissement de souris, mais il est très sensible. Si un utilisateur a l’intention de cliquer sur la souris mais déplace légèrement sa souris, il détectera toujours un glissement. Pour cette raison, il est judicieux d’introduire un seuil lors de la détection d’une traînée. Le seuil est simplement une distance minimale que la souris doit parcourir pour être considérée comme un glissement. Regardons un exemple de codage.

let drag = false
let threshold = 5
let startingX
let startingY

let downListener = (e) => {
  drag = false
  startingX = event.pageX
  startingY = event.pageY
}

let moveListener = (e) => { 
  const moveX = Math.abs(e.pageX - startingX) 
  const moveY = Math.abs(e.pageY - startingY)
  
  if (moveX >= threshold || moveY >= threshold) {
  	drag = true
  }
}

let upListener = () => {
	if (drag) {
  	console.log('Drag Detected')
  } else {
  	console.log('Click Detected')
  }
}

window.addEventListener('mousedown', downListener)
window.addEventListener('mousemove', moveListener)
window.addEventListener('mouseup', upListener)
      
        Copied  
        
      
    

Il y a trois nouvelles variables :

• au seuil – le nombre minimum de pixels dont la souris doit être déplacée pour devenir un frein
• départX – la position X initiale de la souris sur mousedown
• départY – la position Y initiale de la souris sur mousedown

Nous avons modifié deux de nos fonctions d’écoute d’événement :

• souris vers le bas – réinitialise maintenant également le départX et départY variables à la position initiale de la souris
• déplacement de la souris – ne définit désormais le booléen drag que si la souris a déplacé le au seuil quantité en pixels dans n’importe quelle direction.

Afficher le JSFiddle avec le code de seuil de traînée inclus ici.

Il existe, bien sûr, différentes syntaxes que vous pouvez utiliser pour obtenir le même effet, ainsi que des tonnes de bibliothèques d’assistance différentes. Le code ci-dessus devrait fonctionner comme une solution JS vanille pour la plupart des cas d’utilisation.

Si vous avez trouvé ce guide utile, consultez d’autres guides de codage JavaScript dans notre Rubrique JavaScript.