How to distinguish between left and right mouse click with jQuery
How do you obtain the clicked mouse button using jQuery?
$('div').bind('click', function(){
alert('clicked');
});
this is triggered by both right and left click, what is the way of being able to catch right mouse click? I'd be happy if something like below exists:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
As of jQuery version 1.1.3, event.which
normalizes event.keyCode
and event.charCode
so you don't have to worry about browser compatibility issues. Documentation on event.which
event.which
will give 1, 2 or 3 for left, middle and right mouse buttons respectively so:
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});
Edit: I changed it to work for dynamically added elements using .on()
in jQuery 1.7 or above:
$(document).on("contextmenu", ".element", function(e){
alert('Context Menu event has fired!');
return false;
});
Demo: jsfiddle.net/Kn9s7/5
[Start of original post] This is what worked for me:
$('.element').bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
In case you are into multiple solutions ^^
Edit: Tim Down brings up a good point that it's not always going to be a right-click
that fires the contextmenu
event, but also when the context menu key is pressed (which is arguably a replacement for a right-click
)
You can easily tell which mouse button was pressed by checking the which
property of the event object on mouse events:
/*
1 = Left mouse button
2 = Centre mouse button
3 = Right mouse button
*/
$([selector]).mousedown(function(e) {
if (e.which === 3) {
/* Right mouse button was clicked! */
}
});