How to Disable the Middle Mouse Button

Hello,

I’m trying to find a way of disabling the default action of the middle mouse button (in IE, FF & OP) which is to open the link in a new tab…

I’ve tried:

(on) + click + mousedown + mouseup + mousewheel –> preventDefault() etc, etc… but it dosen’t work…

I’m pulling (whats left of) my hair out - is it possible to disable this action?

Any help would be appreciated.

Cheers,
WF

is it possible to disable this action?

Short answer: no.
Long answer, partially on some browser, but the users have many way to deactivate them. Either via extensions or/and plugins, or directly in the options of firefox.

You can not rely on it.

the event.which/event.button (from within the event) will provide which button was pressed but if i’ve found that this value changes from browser to browser…

Maybe you should consider replacing links with some other elements styled like links and acting like links except for the middle click.

Thanks for the replies:

@Amenthes: Yeh, I could do that but they are links - just “progressively enhanced”, what I wanted to disable was the browsers default action of opening a new tab in the background when clicking the middle mouse button, you get the same result doing right click –> “Open Link in New Tab”.

I just find it odd that I can prevent left clicks, right clicks, key presses etc, but no way to turn this behaviour off…

@tripy: …even though Firefox and Opera have config settings that say they do… they just don’t work!

@gRoberts: Thanks I do know about the event.button :slight_smile: - that wasn’t the problem, if I disable onclick, onmousedown, onmouseup (and onmousewheel) the browser still opens the link in a new background tab - there just doesn’t seem to be a way to stop this…

<rant>Things like this are so frustrating - I’m trying to convince programmers where I work that web apps can be as good as desktop apps then every step of the way the browser vendors do stuff tlike this…</rant> :mad:

Thanks for your time/help.

Cheers,
WF

http://unixpapa.com/js/mouse.html

Could be of some use

Thanks gRoberts - already found that :slight_smile:

My tests using IE 7 and Firefox on XP Pro SP2 and Win 2003 confict what Jan Wolter found - I cannot get IE or Firefox to stop that default action e.g.

Save the following code and view it in IE7:

<a href="http://www.sitepoint.com" onclick="window.event.returnValue = false;" onmousedown="window.event.returnValue = false;" onmouseup="window.event.returnValue = false;" oncontextmenu="window.event.returnValue = false;">Sitepoint</a>

Disables most input events appart from middle click (and ctrl + click)…

event.returnValue isn’t the only way to cancel an event.

http://www.quirksmode.org/js/events_order.html

under Turning it off

Thanks gRoberts,

But there’s a difference between cancelling event bubbling (the article you linked to) and preventing a default (browser) action.

e.g. the following function if attached to an event handler of an anchor link tag will prevent the browsers default action (to follow that link)


function stopDefaultAction(e) {
    e = e || window.event;

    e.returnValue = true;

    if (e.preventDefault) {
        e.preventDefault();
    }

    return false;
}

or the following code snippet:


<body onclick="alert('Clicked')">
<script>
	function stopDefaultAndBubble(e) {
		e = e || window.event;
		// Stops the Default Browser Action
		if (e.preventDefault) {
			e.preventDefault();
		}
		e.returnValue = false;
		
		//Stops the event bubbling up to the body element
		if (e.stopPropagation) {
			e.stopPropagation();
		}
		e.cancelBubble = true;
	}
</script>
<a href="http://www.sitepoint.com" onclick="stopDefaultAndBubble(event)">Sitepoint</a>
</body>

Thanks for your help.

the only browser that didn’t stop the href was Firefox. I also got the body onclick…

OK,

I’ve tested the snippet above (stopDefaultAndBubble) in the following browsers (XP Pro + win 2003):

IE 7
Left Click: Nothing Happens
Middle Click: Tab Opens in the background and loads URL

IE 6
Left Click: Nothing Happens
Middle Click: Nothing Happens

Firefox 3
Left Click: Nothing Happens
Middle Click: Tab Opens in the background and loads URL and Alert pops up

Firefox 2
Left Click: Nothing Happens
Middle Click: Tab Opens in the background and loads URL and Alert pops up

Opera 9
Left Click: Nothing Happens
Middle Click: Tab Opens in the background and loads URL

Safari 3
Left Click: Nothing Happens
Middle Click: Nothing Happens

So Firefox, IE(7) and Opera all open a tab… I’ve not tested Chrome (its still beta) or IE 8 - which although it’s still beta I reckon it will behave the same as IE 7.

Given the context of comparing to a desktop app…You could just not use html links at all. Make your own links with <span> and define behavior with pure javascript. You could take stuff like this pretty far.

Since your visitor can set their middle mouse button to perform whichever action they want it to perform why would you assume that it does what you have configured yours to do in their browser and why would you want to interfere with what they have chosen to have it do.

@felgall

Since your visitor can set their middle mouse button to perform whichever action they want it to perform why would you assume that it does what you have configured yours to do in their browser and why would you want to interfere with what they have chosen to have it do.

OK, I’m not a newbie :frowning:

I understand that:

  • Browsers have default functionality - most of the time it’s bad to change that.
  • I don’t assume anything.
  • The behaviour of the brower(s) is not something I’ve configured (default install) other people (outside the company where I work) use browsers that exhibit the same behaviour.
  • People can change the default behaviour of their browsers (e.g. disable javascript, which makes all this pointless)

I would like, for this particular (web) application to disable the default action of the middle mouse button - as I can do for the left and right buttons - for all those people that have javascript enabled and haven’t edited about:config or .ini files or other such things…(which don’t work anyway)

My question/point still stands - why can I disable left and right button default actions on an anchor link but not the middle button…

@crmalibu Yeh, I can do that, but they are URLs and they do point to something. For those that have disabled javascript (or never had it) I would like the app to still work (progressive enhancement).

It appears that this functionality is just a browser bug/quirk…

Cheers,
WF

If you want progressive enhancement then replace links with spans after window load or DOM document ready. That’s how I’d do it at least.

If you just want to find the answer for the middle click problem then I have no idea.