Détecter quel bouton de la souris a cliqué avec jQuery

Août 2013

Lorsqu'un élément reçoit un clic dans une page web, on peut savoir quel bouton de la souris a été utilisé lors du clic. Une souris comporte en général 3 boutons :

  • Le bouton gauche, qui est celui dont on se sert le plus souvent, pour consulter un lien hypertexte ou appuyer sur un bouton de formulaire
  • Le bouton droit, qui ouvre en général un menu contextuel qui présente une série d'options dans un menu
  • Le bouton 3 (aussi appelé bouton milieu ou bouton molette), car la molette ne sert pas qu'à faire le défilement, elle est aussi cliquable

La différenciation du bouton cliqué se fait via la variable event :

$('button').click(function(event){
	console.log(event.which);
	
	if( event.which == 1 ){
		alert('clic du bouton gauche');
	} else if ( event.which == 2 ){
		alert('clic du bouton milieu');
	} else if ( event.which == 3 ){
		alert('clic du bouton droit');
	}
});

Si vous voulez en savoir plus c'est par ici : additionner les x plus grands chiffres avec excel.

La valeur de which est à 1 pour le bouton gauche, 2 pour la molette, et 3 pour la molette. Par contre on ne voit jamais apparaitre le bouton 3 avec l'événement clic, parce que le clic droit fait apparaître le menu contextuel et l'événement n'est pas propagé. Donc pour détecter le clic droit en Javascript avec jQuery, il est nécessaire d'utiliser soit l'événement mouseup, soit mousedown :

jQuery(document).ready(function($){
	$('button').mouseup(function(event){
		console.log(event.which);
	});
	$('button').mousedown(function(event){
		console.log(event.which);
	});
});

Fini de lire cette page ? allez faire un tour ici : intégrer des splashs au pinceau mélangeur, ça peut vous intéresser.

2 commentaires :
commentaire n°2730 par dory
dory jeudi 30 janvier 2014, 14:41
Salut salut
Tout d'abord merci pour cet article, il m'a éclairé mais j'ai encore un petit soucis :
voilà j'ai une page avec une barre pour effectuer des recherches c'est la ou y'a mon autocomplétion et je souhaiterais que quand l'utilisateur clique droit sur prise de sang (par exemple car je suis dans le cas d'un hôpital)ça lui affiche une page avec les détails de l'examen (eux ils sont présent dans un fichier detail.php). Cependant, avec ta méthode il détecte le clique uniquement sur la zone et non sur le champ sélectionner. J'espère avoir été claire voilà

Merci d'avance
Dory
commentaire n°3057 par meed
meed jeudi 23 avril 2015, 18:34
contacte moi
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré