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.

I very highly advise against breaking basic browser/OS functionality. — JAAulde, Feb 27 '11 at 23:37
@JAAulde: In some web applications, scrolling might not be meaningful so disabling it can be useful. — pimvdb, Feb 27 '11 at 23:52
My mouse doesn't even have a middle button! Oh wait, it hasn't got any buttons at all. :) — , Feb 27 '11 at 23:54
@JAAulde 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. — elwyn, Feb 28 '11 at 19:46
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? — JAAulde, Feb 28 '11 at 21:10
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. — elwyn, Feb 28 '11 at 23:15
possible duplicate of [Disabling middle click scrolling with javascript](http://stackoverflow.com/questions/1930875/disabling-middle-click-scrolling-with-javascript) — kapa, Apr 17 '11 at 07:36

pimvdb · Accepted Answer · 2011-02-28T11:54:30.327

31

Use:

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

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

edited Feb 28 '11 at 11:54

answered Feb 27 '11 at 23:40

pimvdb

151,816
78
307
352

1

@pimvdb Why use event attributes when you can bind the event handlers unobtrusively? – Šime Vidas Feb 27 '11 at 23:49
@pimvdb Yes, it works, but it's still inferior to JavaScript event binding. – Šime Vidas Feb 27 '11 at 23:54
Let's change it to jQuery style then. – pimvdb Feb 27 '11 at 23:56
@Sime Vidas: if you look at my tags you'll see I am a Mac developer: http://www.apple.com/magicmouse/ :) <— bad joke, sorry – Feb 27 '11 at 23:58
@pimvdb don't use jQuery just for this. It's like using a car to drive to your neighbors. – Feb 28 '11 at 00:00
I agree, but putting it in HTML is not preferred either is it? – pimvdb Feb 28 '11 at 00:01
1

@pimvdb If the OP uses jQuery, then a jQuery solution is OK. If not, then just `document.body.onmousedown = function(e) { ... };` – Šime Vidas Feb 28 '11 at 02:20
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! – elwyn Feb 28 '11 at 19:34
3

`addEventListener("mousedown", function(e){ if(e.button == 1){ e.preventDefault(); } });` worked for me. – Sebastian Simon Sep 20 '17 at 00:18

score 4 · Answer 2 · answered May 28 '20 at 11:16

4

tested with the current version of firefox and chrome

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

answered May 28 '20 at 11:16

Alper Aydingül

251
1
9

score 3 · Answer 3 · answered May 24 '15 at 12:21

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

answered May 24 '15 at 12:21

rnevius

26,578
10
58
86

this is vanilla sweet – Dee Dec 07 '22 at 16:46

score 0 · Answer 4 · answered Apr 17 '11 at 06:21

0

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

answered Apr 17 '11 at 06:21

Chris McFarland

6,059
5
43
63

score -2 · Answer 5 · edited Apr 17 '11 at 07:33

-2

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

edited Apr 17 '11 at 07:33

kapa

77,694
21
158
175

answered Feb 28 '11 at 12:18

Rajmahendra

3,092
3
31
42

I can't seem to get this one to work, any idea what I mightn't be doing correctly? http://jsfiddle.net/2R7tj/ – elwyn Feb 28 '11 at 19:38

score -4 · Answer 6 · answered Feb 28 '11 at 12:08

-4

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..

answered Feb 28 '11 at 12:08

Shadow The GPT Wizard

66,030
26
140
208

2

http://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. – elwyn Feb 28 '11 at 19:40
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. – Shadow The GPT Wizard Mar 01 '11 at 06:54

Prevent middle mouse click scrolling

6 Answers6

Linked