Prevent middle mouse click scrolling

Question

I'm looking for a way to stop the middle mouse click from causing the browser to start scrolling, and showing the little scroll 'compass'.

I have seen Disabling middle click scrolling with javascript however the solution is a bit more hackey than I would like, and doesn't seem like something I could actually use.

I'm looking for a more definitive "This is how you do it" or "You cannot do that, son".

I am of course open to hacks and workarounds.

Just because S.O. questions look nicer with code, here is what I am using to close tooltips when right or middle clicking.

msg.mousedown(function(e) {
    if (e.which == 2) {   //middle mouse click
        msg.hide();
        e.preventScrolling();   //if only this worked...
    }
    else if (e.which == 3) {   //right mouse click
        msg.hide();
    }
}).bind('contextmenu', function(e) {
    e.preventDefault();
}).click(function(e) {
    e.stopPropagation();
});

edit: jQuery, JavaScript, whatever, let's just all play nicely now :)

Edit 2:

I'm more interested in preventing the little scroll 'compass' than stopping the page from scrolling. I guess that wasn't very clear from my initial description.

Aluino

I very highly advise against breaking basic browser/OS functionality. – Apollo

@JAAulde: In some web applications, scrolling might not be meaningful so disabling it can be useful. – Polenta

My mouse doesn't even have a middle button! Oh wait, it hasn't got any buttons at all. :) – Jara

@Apollo The context for this is small popup notifications, I guess you might call them 'Growl style notifications'. I want users to be able to right or middle click on these to dismiss them without the context menu appearing (check!) or the scroll 'compass' appearing. I HIGHLY doubt anyone is going to be trying to scroll in a <100px message which will never be scrollable. On principle, I do however agree breaking standard browser/OS functionality should be avoided but there are situations that I feel warrant it. – Aluino

I don't want to be argumentative, but if you "HIGHLY doubt anyone is going to be trying to scroll in a <100px message which will never be scrollable," why are you bothering? – Apollo

Argumentative, no, 'debatitive', go wild :> I am used to being able to close tabs in my browser with a middle click. I feel that the action 'middle clicking a closeable object/element' should close the object/element. Which I can achieve, however the little leftover scroll 'compass' makes it imperfect. Actually 'scrolling' in the notification isn't an issue. Note this is in the context of a web application where messages and notifications are expected/dealt with often, not a standard web page. – Aluino

possible duplicate of Disabling middle click scrolling with javascript – Td

Answer 1

Use:

$('body').mousedown(function(e){if(e.button==1)return false});

This works on Chrome: http://jsfiddle.net/PKpBN/3/

Polenta

@Polenta Why use event attributes when you can bind the event handlers unobtrusively? – Vanny

@Polenta Yes, it works, but it's still inferior to JavaScript event binding. – Vanny

Let's change it to jQuery style then. – Polenta

@Sime Vidas: if you look at my tags you'll see I am a Mac developer: apple.com/magicmouse :) <— bad joke, sorry – Jara

@Polenta don't use jQuery just for this. It's like using a car to drive to your neighbors. – Jara

I agree, but putting it in HTML is not preferred either is it? – Polenta

@Polenta If the OP uses jQuery, then a jQuery solution is OK. If not, then just document.body.onmousedown = function(e) { ... }; – Vanny

This is the closest yet to what I wish to achieve - no scroll 'compass' when middle clicking the mouse. Now if only it worked on other browsers! – Aluino

addEventListener("mousedown", function(e){ if(e.button == 1){ e.preventDefault(); } }); worked for me. – Genocide

Answer 2

tested with the current version of firefox and chrome

document.body.onmousedown = function(e) {
    if(e.button == 1) {
        e.preventDefault();
        return false;
    }
}

Pounce

Answer 3

There's no need to include jQuery just for this.

If you are using jQuery, there are already some great answers here. If not, you can use vanilla JS:

document.body.onmousedown = function(e) { if (e.button === 1) return false; }

Whitford

this is vanilla sweet – Josephson

Answer 4

Try using return false; instead of e.preventScrolling();

Wittie

Answer 5

document.body.style.overflow=allowScroll?"":"hidden";

Proa

I can't seem to get this one to work, any idea what I mightn't be doing correctly? jsfiddle.net/2R7tj – Aluino

Answer 6

If you want to stop scrolling completely, here is the required code:

window.onscroll = function() {
    document.body.scrollTop = 0;
}

This will effectively disable the middle button as well..

Vivienviviene

jsfiddle.net/XcBDF In Chrome, this disables dragging the scrollbar, or clicking the scroll buttons on the scroll bar, but it does nothing to the middle mouse button, I can scroll and click-scroll just fine. In Firefox it does nothing. – Aluino

It did disable scrolling when moving the middle wheel but you're right about clicking it.. maybe in combination with code disabling that click then. – Vivienviviene