Prevent "hijacking" the intention of a link click when applying custom functionality to a click event

Question

For example, there is some JavaScript code which has a click handler which determines where the user should be redirected to. Let's say it's just a redirection random link that is calculated when the user clicks the link.

Here are some scenarios:

• If the user left clicks on the link, the intention of the user is to keep the navigation in the same tab, which works fine with window.location.

• If the user middle clicks this link, to the user it appears that the website has hijacked the middle click and simply ignored it, redirecting the user within the same tab instead of a new tab.

• Also, as someone just commented (and deleted the comment?), another scenario is modifier keys can also suggest to the browser to open a new tab, or even a new window.

• Another suggestion is being able to open a link in a new tab or window via the context menu. This is less important, but definitely the same usability issue.

I've seen this issue on many websites, notably for me, Google Analytics, where almost every time I middle click, this effect happens.

A good example of what some JavaScript code needs to is:

Process some data, then send off a XHR request that needs to be completed before allowing the user to continue to the link they clicked on.

How do you get around this? e.g. are there ways to detect if the user has expected the link to appear in the new tab, and if so, is it possible to load up a new tab? Maybe I'm thinking about this the wrong way around?

Answer 1

event.button can be used to identify which mouse button was clicked. The Middle button returns 1.

The event object also contains the properties event.ctrlKey, event.altKey and event.shiftKey which are self-explanatory. Their values are true if the corresponding keys are pressed, and false otherwise.

---

The behaviour you wish to achieve: http://jsfiddle.net/pratik136/nCdhv/9/

html:

<a id="smart" href="http://www.bbc.co.uk/">Click</a>​

js:

$(function() {
    $('#smart').on('click', function(event) {
        if (event && event.button && event.button === 1) {
            event.preventDefault();
            window.open($('#smart').attr('href'), '_blank');
            return false;
        } else {
            return true;
        }
    });
});​

---

src: https://developer.mozilla.org/En/DOM/Event.button
browser support: http://help.dottoro.com/ljaxplfi.php

Answer 2

This doesn't exactly answer the question, but the underlying question. A mate of mine realised that $.ajax has a async: false option.

$(function() {
    $('a').click(function(e) {
        $.ajax({url: '/', async: false}).done(function(d) { alert('hello ' + d) })
    })
})​

Fiddle: http://jsfiddle.net/gakman/7qdXE/

This will block the href="" click event until the ajax response has returned, continuing with whatever tab/window the link was headed.

He also says "this is the worst thing ever" which is absolutely true.