How to distinguish between left and right mouse click with jQuery

Question

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'); }); 

Answer 1

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!');     } }); 

Answer 2

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)