Command-click doesn't open a new tab, but middle-click does

Question

On my website, which is a one-page JS site using Sammy.js and jQuery, when I middle-click a link with a mouse, the link opens in a new tab. But when I command-click on a Mac, it doesn't. This happens in both Firefox and Chrome, so I assume it must be according to spec in some way.

This happens on a Macbook Air (so trackpad + command button). Most sites work just fine though, with command-click being identical to normal middle-click.

Try it out yourself: https://circleci.com. Command-click between "about", "home" and "contact" and you should experience the problem - they don't open in new tabs.

Solution 1

Speculating here, but will confirm later from a Mac. This has been confirmed to be working on a Mac.

Win ctrl+click or a Mac command+click gets picked up by a "normal" click listener, just like a click with any other modifier key (alt+click, shift+click etc).

This is particularly confusing since a ctrl+click on a Mac gets interpreted as a right-click on OS level. Command-click, on the other hand, is not interpreted as a middle-click but rather is a browser preference.

Assuming that you do not have in-site functionality that specifically relies on modified clicks, it would be appropriate to exclude such events from click listeners, and instead allow for them to bubble up to be natively handled by the browser. Given the experience of someone in the similar situation, you should be able to add the following to click handlers (likely a delegate on library level as pointed out by Brilliand):

if (e.metaKey || e.ctrlKey) return;

When added at the beginning of the handler with e referring to a current click event, this should circumvent any following e.preventDefault();

Update:

It actually works! In this rather minimalistic fiddle, I am able to recognize when command-clicked or control-clicked, so as to avoid executing the rest of the click handler which includes ajax-fetching the content and e.preventDefault();. This allows for a command-click to be handled "as intended" on a Mac, i.e. opening the link in a new tab.

With this finding in mind, these lines should now read

if (e.isDefaultPrevented() || e.metaKey || e.ctrlKey) {
    return;
}

Solution 2

There is some interesting insight here: https://groups.google.com/forum/#!msg/mozilla.dev.usability/H1qLTur4EFc/gXH007CAPk8J

Apparently the JS you are using can preventDefault() the cmd+click while the middle-click is unaffected. Consult the docs of your JS/Site framework.

Solution 3

Here's the relevant code from sammy.js:

// bind to link clicks that have routes
$('a').live('click.history-' + this.app.eventNamespace(), function(e) {
    if (e.isDefaultPrevented()) {
        return;
    }
    var full_path = lp.fullPath(this);
    if (this.hostname == window.location.hostname && app.lookupRoute('get', full_path)) {
        e.preventDefault();
        proxy.setLocation(full_path);
        return false;
    }
});

Summary: If someone clicks on a link, override the standard link behavior with sammy.js's behavior, which is to change the current page to show the content of the target page with no actual page load. According to dakdad's link, a command-click (unlike a middle-click) is caught by the click event, and can be overridden.

For a workaround, you could remove sammy.js's event handler (using $('a').die('click.history-' + _sammy_event_namespace_);) and replace it with a modified version that checks for command-clicks and avoids overriding them.

Comments

[uotonyh]

Command-click is usually interpreted as a right-click on a Mac: is that what you are trying to intercept?

[Miguel Rodrigues]

I'm using windows 7 and google chrome (v19). Ctr-Click does not open a new tab. Maybe it is working as expected?

[Mitch Dempsey]

@uotonyh that would be Control-Click.

[dakdad]

There are events attached to those links right? Find the difference between those three links and the login link - because that one works as expected.

[Paul Biggar]

@dakdad THe login link doesnt have a handler, but the others do. But why does it work when a mouse middle-clicks it.

[Oleg]

@PaulBiggar: I don't see a handler assigned to the login link when inspecting. Has it been removed since your original comment, or is it delegated etc. instead?

[Paul Biggar]

@o.v. No, the login link never had a handler.

[Paul Biggar]

I want to thank you for your answer, and apologize that I didn't give you the bounty. There were two good answers, but I have only one bounty to give.