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

Question

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

Rothermere

Answer 1

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

Blamable

Yeah, I found that contextmenu was a nice way to override the built-in menu. But maybe your first function could include it instead of tacking it on the end. I'm not sure why he's using live, but I would use .bind('mousedown contextmenu', function... – Forearm

lol! @fudgey I also tot why he was using live when he can use window.ready and just attach it straight. but i tot he must have his reasons. But about the tacking, it wud make whatever code he puts in the if statement execute twice. – Blamable

actually it's just a snippet of code i copied, so i have no clue why i'm using .live... haha, okay, so i'll work with what i have above, but did you think there was something better? and i'll use .bind('mousedown contextmenu', function – Rothermere

if you use <code>.bind('mousedown contextmenu', function</code>, the code would be executed twice. if you can live with that then no problem. you are good to go – Blamable

Answer 2

I've noticed some oddities in the past with using the click event for anything but a regular left-click. I don't recall the details, but if you change "click" to "mousedown" or "mouseup" you should have better results.

Koger

You're right, click doesn't work but mousedown works to detect middle and right buttons – Unteach

Answer 3

Now button has been fouled up beyond all recognition. According to W3C its values should be:

• Left button – 0
• Middle button – 1
• Right button – 2

According to Microsoft its values should be:

• Left button – 1
• Middle button – 4
• Right button – 2

No doubt the Microsoft model is better than W3C’s. 0 should mean “no button pressed”, anything else is illogical.

From http://www.quirksmode.org/js/events_properties.html

Palaeogene

jQuery normalizes the following properties for cross-browser consistency: … which. Better use which instead of button. – Balbinder