How do websites end up breaking middle-click functionality?

Question

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?

Answer 1

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.

• Fix Chrome middle click behavior
• middle button new tab
• middle click mini

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.