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

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.