0

I'm developing for a site that does something a bit strange with some links.

When the user clicks on a link, an indicator GIF that looks kinda like this appears next to the link, and the link itself is disabled. It then navigates to the page. This is because of concerns that impatient users might repeatedly click the link if it doesn't load immediately, putting an extra load on our server.

Here's how we do this:

<a id="link1" href="/target_page"
   onclick="var link = document.getElementById('link1');
            var loc = link.href;
            link.removeAttribute('href');
            link.setAttribute('onclick', 'return false;');
            document.getElementById('link1_img').style.display='';
            window.location = loc;">
  Link Text
  <img id="link1_img" src="/images/indicator.gif" style="display:none;" />
</a>

Here's the problem. While this has the expected behavior if the user clicks on the link normally, or right-clicks it and opens it in a new window or tab from the context menu, it doesn't always work properly if the user middle-clicks or Ctrl+clicks on the link.

The desired behavior in that case would be to skip all the JavaScript stuff and simply open the link in a new tab. I did a quick test on Windows with the latest version of each major browser, and IE, Firefox, and Opera all do this. Chrome and Safari, however, display the indicator and open the link in the current tab.

Any suggestions on how to make it behave consistently on all browsers?

Taymon
  • 24,950
  • 9
  • 62
  • 84
  • 1
    Your GIF is driving me nuts. Every time my eye passes by it, I think I'm waiting for something to load. – Elliot Bonneville Jul 15 '12 at 18:04
  • Can't you just disable the link if a new page is loading? Browsers make it pretty clear when a page is loading. If you just disable the link, then it won't matter if they click it again. – Ashley Strout Jul 15 '12 at 18:29
  • @David Is there a method I can call to determine whether a new page is loading? – Taymon Jul 15 '12 at 19:12

1 Answers1

0

You can use the code here for handling middle clicks, and take a look here for the Ctrl+click. However, I found that I had to use .mousedown for middle clicks instead of clicks (at least in Firefox).

If you use 

$('#link').click(function(e) {
    if(e.ctrlKey && e.which == 1 || e.which == 2) { // Ctrl + Click
        console.log("hi");
        $(this).css('color','#aaa');
        $(this).click(function(e) { e.preventDefault(); });
    } 
});

and don't add e.preventDefault(), it should work as expected. Works for me in Firefox, Chrome, and IE9.

Edit: Without jQuery, this is how I would do it. Do take a look at this post about preventDefault() vs return false;, though. 

document.querySelector('#link').onclick = function(e) {
    this.style.color = '#aaa';
    disableLink(this);
}

// middle clicks only captured in mousedown
document.querySelector('#link').onmousedown = function(e) { 
    this.style.color = '#aaa';
    if (e.button == 1) {
        disableLink(this);
    }
}

function disableLink(elem) { 
    elem.onclick = function(e) { console.log("HI"); this.href = '#'; return false;}
    elem.onmousedown = function(e) { console.log("HI"); this.href = '#'; return false;}
}

Unfortunately, there seems to be a difference in the way Chrome and Firefox handle middle clicks. Firefox only shows middle clicks in onmousedown, and it opens a new tab during the onmousedown. This means that for Firefox, we have to disable the link after onmousedown. However, in Chrome, the middle click shows up in onmousedown and onclick, but the link is only opened after the onclick. Since we disable the link on the mousedown, the onclick never gets a chance to run :(.

Not sure how to fix this...

Community
  • 1
  • 1
Achal Dave
  • 4,079
  • 3
  • 26
  • 32
  • I don't have jQuery on this project. (I do have Prototype, though the existing code for this particular feature doesn't use it.) Can I modify this to work without jQuery? – Taymon Jul 16 '12 at 16:48