Search code examples
jqueryclicklivekeycoderight-mouse-button

Jquery: detect if middle or right mouse button is clicked, if so, do this:


Check out my jsfiddle demo, if e.which == 1 then when you left click the h2 it will e.which == 2 or e.which == 3 then it wont work. 2 is the middle mouse button, and 3 is the right mouse button. i found this too:

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

This code isn't working:

code:

    $("h2").live('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

Solution

  • You may want to trap the mousedown event, and you also need to prevent the oncontextmenu event to stop the context menu from coming up during the right click event.

    $("h2").live('mousedown', function(e) { 
       if( (e.which == 1) ) {
         alert("left button");
       }if( (e.which == 3) ) {
         alert("right button");
       }else if( (e.which == 2) ) {
          alert("middle button"); 
       }
       e.preventDefault();
    }).live('contextmenu', function(e){
       e.preventDefault();
    });
    

    UPDATE: .live() has been deprecated since jQuery 1.9. Use .on() instead.

    $("h2").on('mousedown', function(e) { 
      if (e.which == 1) {
        alert("left button");
      } else if (e.which == 3) {
        alert("right button");
      } else if (e.which == 2) {
        alert("middle button");
      }
      e.preventDefault();
    });