Disabling middle click scrolling with javascript

Question

Background: I am creating a table reminiscent of whenisgood.net, in that it has click-n-drag toggling for table elements. I want to call different types of toggling code when the left, middle, and right mouse buttons activate a mousedown event.

By using JQuery, I'm off to a good start.

$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
  e.preventDefault();
  toggle(this, e);
});

In the toggle() function I can use e.which to determine what button was clicked.

The punchline: I used e.preventDefault() hoping that it would stop the middle click default behavior of scrolling. It didn't. What can I do to stop the scroll action from activating?

See also "Triggering onclick event using middle click"

Answer 1

Middle-click can be disabled with Javascript, but only in IE, Safari, and Konquerer. Firefox requires a config file edit. Opera, of course, gives you the middle finger when you try to do anything.

Answer 2

Currently, my solution is this: (more jquery!)

$(".togglable").wrap(
  "<a href='javascript:void(0);'
  onclick='return false;'></a>"
);

By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.

Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.

But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.