CODEWITHSUNDEEP
javascriptjqueryscrollmouseclick-event
elwyn
elwyn

Reputation: 10521

Prevent middle mouse click scrolling

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.

Upvotes: 28

Views: 30181

Answers (6)

Alper Aydingül
Alper Aydingül

Reputation: 261

tested with the current version of firefox and chrome

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

Upvotes: 5

rnevius
rnevius

Reputation: 27102

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

Upvotes: 3

Rajmahendra
Rajmahendra

Reputation: 3224

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

Upvotes: -2

Chris McFarland
Chris McFarland

Reputation: 6169

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

Upvotes: 0

Shadow Wizzard
Shadow Wizzard

Reputation: 66388

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

Upvotes: -5

pimvdb
pimvdb

Reputation: 154908

Use:

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

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

Upvotes: 32

Related Questions