How to Disable the Mouse wheel click Button?

Question

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?

Prosecutor

Again someone who dont respect the standard mouse events -.-' howtogeek.com/howto/internet/… and pcworld.com/article/185288/… – Prokopyevsk

Answer 1

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.

Underpants

Does not work in chrome 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. – Dukas

@Christoph: Sorry, copied that from the suggested link. Corrected it. – Underpants

@Esailija: Works in Chrome for me. In Firefox it indeed does not. – Underpants

@J.P.tenBerge what OS? "click" is not fired for middle/right clicks in windows 7 NVM that's just right click. – Dukas

@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. – Underpants

@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 – Dukas

@Esailija: The spec (w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/…) 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. – Underpants

@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? – Dukas

Answer 2

This works for me...

$(document).on("mousedown", "selector", function (ev) {
    if (ev.which == 2) {
        ev.preventDefault();
        alert("middle button");
        return false;
    }
});

Manuel

Sorry for adding a comment that doesn't add to the coversation. But that's utterly awesome. – Luciennelucier

Answer 3

My code:

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

Osmo

Answer 4

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

Prepossessing