How to Distinguish Between Left and Right Mouse Click With Jquery

How to distinguish between left and right mouse click with jQuery

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

How to distinguish between left and right mouse click with jQuery on firefox

Instead of click, use mousedown event, as right click opens context menu, you need to use mouse down instead of mouse click, else prevent event bubbling after right click,

$('#btn').on("mousedown",function(e){
    //  your code
});

Here is a small fiddle demo of mouse down which will help you.

How to detect right click + left click

JSfiddle: https://jsfiddle.net/mkarajohn/pd725ch6/5/

var rightMouseClicked = false;

function handleMouseDown(e) {
  //e.button describes the mouse button that was clicked
  // 0 is left, 1 is middle, 2 is right
  if (e.button === 2) {
    rightMouseClicked = true;
  } else if (e.button === 0) {  
    //Do something if left button was clicked and right button is still pressed
    if (rightMouseClicked) {
      console.log('hello');
      //code
    }
  }
  console.log(rightMouseClicked);
}

function handleMouseUp(e) {
  if (e.button === 2) {
    rightMouseClicked = false;
  }
  console.log(rightMouseClicked);
}

document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

Handle clicks with left and right mouse button with jQuery

Use mousedown event instead of click event and implement all needed behaviors

How to distinguish between left and right mouse click with jQuery

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

The different ways to distinguish between left and right mouse click, which one to use?

The contextmenu event isn't really for right-clicks; it's for context menus, however they're invoked (context menu keyboard key, special click with one-button mice, etc.). You'll probably want to still capture those contextmenu events so you can cancel them, but then use mousedown or mouseup for specifically handling right-clicks.

How do I distinguish left/right/double click in the handler if $.live('click')?

well there is a separate event handler for doubleclick.. The event is dblclick

Bind event to right mouse click

There is no built-in oncontextmenu event handler in jQuery, but you can do something like this:

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};

  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { 
      alert('Right mouse button!'); 
      return false; 
    } 
    return true; 
  }); 
});

Basically I cancel the oncontextmenu event of the DOM element to disable the browser context menu, and then I capture the mousedown event with jQuery, and there you can know in the event argument which button has been pressed.

You can try the above example here.

How to distinguish between left and right mouse click on mousedown event in Google Map API v3

Instead of mousedown use simply click.

For right click event you can catch rightclick event this way:

google.maps.event.addListener(map, "rightclick", function(event) {
  /* do something on right click */
});

JSFIDDLE

---

To distinguish what button was pressed using mousedown event you can use event.which parameter. But for that, the handler should be added to DOM element (canvas), since Google API doesn't provide which option in event object.

var c = document.getElementById('map-canvas');
google.maps.event.addDomListener(c, "mousedown", function (e) {
    if (e.which === 1) {
        $("#click").text("Left click");
    } else if (e.which === 2) {
        $("#click").text("Middle click");
    } else if (e.which === 3) {
        $("#click").text("Right click");
    }
});

JSFIDDLE

---

Related Topics