How do websites end up breaking middle-click functionality?
Asked Answered
D

1

16

By default, middle-click will open a link in a new tab.

Some sites end up breaking this functionality. Middle-click ends up being the same as left-click.

Why does this happen? Is it because they program functionality for a click event, and erroneously have it apply to all clicks instead of just left-click?

Is the problem solved by explicitly giving behavior to a middle-click? Or by making the existing click behavior code apply more narrowly?

Dropsy answered 20/3, 2015 at 22:42 Comment(4)
I think there are indeed many scripts which do not check which button is pressed.Ostmark
Button behaviour is pretty much borked. The middle button should not generate a click event at all, but some scripts will look for button presses (mousedown/up) and get the mouse button ID wrong. The first step is to stop using left, right and middle in scripts and start using primary, secondary, tertiary, etc. since some pointing devices have one button and some have perhaps 9 or 16.Bob
Well the browsers and JQuery use 1, 2, and 3. Most popular websites handle middle-click just fine. So I am wondering if this is because they painstakingly programmed that behavior in, or because they didn't make a particular mistake.Dropsy
I'm surprised this question and answer don't have 800 upvotes each. This is one of the most annoying things I experience daily surfing sites like Huffington Post and even Yahoo, who as a tech firm I would think would know better.Invoke
M
13

Overview:

It is very easy to inadvertently prevent middle-click functionality in WebKit browsers. In WebKit browsers such as Chrome, Safari, and modern Opera, middle-clicking on a link fires a preventable click event. This behavior differs from Firefox and IE, where middle-clicking a link will not fire a click event.

There is actually an open bug report from 2008 on this issue, which unfortunately does not appear to have gone anywhere in the last 7 years.

Problem Code:

So let's take a look at how easy it is to break this functionality in WebKit browsers while doing something completely ordinary.

var link = document.getElementById('link');
link.addEventListener('click', function(e) {
    e.preventDefault();
    alert('You clicked!');
});
<a id="link" href="http://www.example.com/">example.com</a>

Code similar to this is common when using a link to to preform other tasks, such as preventing going to the link to load the content by AJAX instead. However given WebKit's middle-click behavior, this will also prevent the native middle-click behavior.

A Solution for Developers:

It is possible to resolve the inconsistency by detecting which mouse button was pressed using the non-standard but widely-implemented MouseEvent.which property. The following code will allow the middle-click function to behave as normal.

Better Code:

var link = document.getElementById('link');
link.addEventListener('click', function(e) {
    if (e.which === 2) {
        return;
    }
    e.preventDefault();
    alert('You clicked!');
});
<a id="link" href="http://www.example.com/">example.com</a>

Unfortunately, since preserving normal behavior requires additional knowledge and implementation from the developer, unless the WebKit bug is fixed, websites that break this functionality will doubtlessly continue. More-than-likely many developers do not even know that this function of the middle-click exists, let alone testing for compatibility.

A Solution for Users:

This problem has prompted the creation of at least a few different browser extensions aimed at fixing the problem. Here are the ones listed for Chrome in the bug report mentioned above.

Conclusion:

So yes, those websites that do handle this behavior well are using some extra code to preserve the middle-click functionality in WebKit browsers.

Molton answered 28/3, 2015 at 16:5 Comment(2)
Great answer! FYI I think you read my "painstakingly programmed..." comment in reverse (I probably wrote it poorly). I was saying, with websites where middle click does work, is this because they put in extra effort to make it work. Your answer seems to suggest: yes.Dropsy
Looks like all three of those user solutions aren't maintained anymore, a good one these days is underpassapp.com/StopTheMadnessDropsy

© 2022 - 2024 — McMap. All rights reserved.