7

I'm trying to find a way of disabling the default action of the mouse wheel button which is to open the link in a new tab.

Is that possible?

Floern
  • 33,559
  • 24
  • 104
  • 119
Déjà Bond
  • 291
  • 4
  • 8
  • 32
  • 2
    Again someone who dont respect the standard mouse events -.-' http://www.howtogeek.com/howto/internet/prevent-annoying-websites-from-messing-with-the-right-click-menu-in-firefox/ and http://www.pcworld.com/article/185288/bring_your_middle_mouse_button_to_life.html – Ron van der Heijden Jul 09 '12 at 09:45

4 Answers4

9

Bind a generic click event handler that specifically checks for middle clicks. Within that event handler, call e.preventDefault():

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

Note that not all browsers support preventing this default action. For me, it only works in Chrome. Firefox, Opera and IE9 all do not raise the click event with middle mouse click. They do raise mouseup and mousedown.

Community
  • 1
  • 1
J.P.
  • 5,567
  • 3
  • 25
  • 39
  • 7
    Does not work in chrome http://jsbin.com/arulub/edit#javascript,html Not in firefox either. Note that your code is wrong, `"click"` doesn't even fire for the middle/mousewheel button. – Esailija Jul 09 '12 at 09:35
  • @Christoph: Sorry, copied that from the suggested link. Corrected it. – J.P. Jul 09 '12 at 09:39
  • 1
    @Esailija: Works in Chrome for me. In Firefox it indeed does not. – J.P. Jul 09 '12 at 09:40
  • @J.P.tenBerge what OS? `"click"` is not fired for middle/right clicks in windows 7 NVM that's just right click. – Esailija Jul 09 '12 at 09:41
  • @Esailija: Using Windows 7 here as well, middle click is firing in Chrome with me. Also, I noticed that mouseup and mousedown get fired, in other browsers as well. – J.P. Jul 09 '12 at 09:50
  • @J.P.tenBerge mouseup and mousedown do fire for all the mousebuttons which is why my test page has them. I was under the impression that click fires only for left mousebutton but looks like chrome has made an exception for it – Esailija Jul 09 '12 at 09:54
  • @Esailija: The spec (http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-mouseevents) suggests a click event should receive button context information. This includes the middle button. Though I'm not using this property due to different browser implementations, the spec does suggest it should be able to work with the middle button in the click event handler. – J.P. Jul 09 '12 at 09:58
  • @J.P.tenBerge reading the spec, browsers should fire click for right and middle clicks as well so it's confusing because no browser fires it for right click and only chrome fires it for middle click? – Esailija Jul 09 '12 at 10:18
5

This works for me...

$(document).on("mousedown", "selector", function (ev) {
    if (ev.which == 2) {
        ev.preventDefault();
        alert("middle button");
        return false;
    }
});
A.T.
  • 24,694
  • 8
  • 47
  • 65
4

My code:

$(document).on('auxclick', 'a', function(e) {
if (e.which === 2) { //middle Click
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    return false;
}
return true;
Alexander Olehnovich
  • 41
  • 2
3

Disable mouse wheel event by using JAVASCRIPT :

In IE:

document.attachEvent('onmousewheel', function(e){
     if (!e) var e = window.event;
     e.returnValue = false;
     e.cancelBubble = true;
     return false;
}, false);

In Safari:

document.addEventListener('mousewheel', function(e){
    e.stopPropagation();
    e.preventDefault();
    e.cancelBubble = false;
    return false;
}, false);

In Opera:

document.attachEvent('mousewheel', function(e){
    if (!e) var e = window.event;
    e.returnValue = false;
    e.cancelBubble = true;
    return false;
}, false);

In Firefox:

document.addEventListener('DOMMouseScroll', function(e){
    e.stopPropagation();
    e.preventDefault();
    e.cancelBubble = false;
    return false;
}, false);
Gaurav Agrawal
  • 4,355
  • 10
  • 42
  • 61