CODEWITHSUNDEEP
jqueryclickmouseevent
Chankey Pathak
Chankey Pathak

Reputation: 21676

Detecting middle mouse click event jQuery

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

Upvotes: 15

Views: 15676

Answers (2)

Apache
Apache

Reputation: 634

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

Upvotes: 6

nnnnnn
nnnnnn

Reputation: 150080

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/

Upvotes: 28

Related Questions