how to distinguish left mouse click and right with jquery?

Question

Hello,

What is the way of understanding the clicked mouse button with jquery or with javascript?

$('div').bind('click', function(){
    alert('clicked');
});

this fetches both right and left click, what is the way of being able to catch rightclick? I'd be happy if sth like below exists:)

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

Thanks, Sinan.

Answer 1

from a beautiful site:

$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

Answer 2

The jQuery Right-Click plugin is designed to make that simpler

Answer 3

It seems to me that a slight adaptation of TheVillageIdiot's answer would be cleaner:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

EDIT: JQuery provides an e.which attribute, returning 1, 2, 3 for left, middle, and right click respectively. So you could also use if (e.which == 3) { alert("right click"); }

See also: answers to "Triggering onclick event using middle click"

Answer 4

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