Detecting middle mouse click event jQuery

Question

I want to show a jQuery-UI dialog box as a popup when user clicks on left mouse button or the middle one. It works for left click (I get the alert box and after that the popup) but doesn't work for middle (neither alert box nor popup). What am I missing?

$('a.external').live('click', function(e){
  if( e.which <= 2 ) {
    e.preventDefault();
    alert ("inside if");
  }
  popUp.start(this);
});

Answer 1

Use mousedown or mouseup instead of click. And (unless you are using a very old version of jQuery) use .on() instead of .live():

$(document).on("mousedown", "a.external", function(e) {
   if( e.which <= 2 ) {
      e.preventDefault();
      alert ("inside if");
   }
   popUp.start(this);
});

...where ideally you'd use a parent element much closer to the link than document.

Demo: http://jsfiddle.net/7S2SQ/

Answer 2

To get this working fully in Firefox (40.0.3), I had to implement .on('mouseup', fn), as follows:

$(selector).on('mouseup', function (e) {

    switch (e.which)
    {
        // Left Click.
        case 1:
            // By way of example, I've added Ctrl+Click Modifiers.
            if (e.ctrlKey) {
                // Ctrl+LeftClick behaviour.
            } else {
                // Standard LeftClick behaviour.
            }
            break;

        // Middle click.
        case 2:
            // Interrupts "Firefox Open New Tab" behaviour.
            break;

        // Default behaviour for right click.
        case 3:
            return;
    }

    // Pass control back to default handler.
    return true;
});