jQuery: click handler is not invoked when link is opened in new tab/window

Question

Hi!

I have noticed when user clicks on a link with, say middle button, or shift/ctrl+left button, click handler attached to hyperlink is not called.

I have seen solutions to track mousedown event, but what I'd like is to track exact event of following a link.

Are there any suggestions? Thanks

Answer 1

mousedown/mouseup is indeed the only way you can get notified of middle button interaction, so detecting a down-then-up event without intervening mouseout event is more or less the best you can do. It's not very good.

I wouldn't bother, since even if you trapped this one eventuality, there are many other interactions you can't pick up. As well as middle-click (which might not be ‘Open in new tab’ in all browser/configurations; for example in IE6 that'll be the user turning on scrolling mode), the user might right-click and ‘Open in new window’, or drag the link to the address bar or new tab, or various other browser-specific actions to perform a navigation.

Answer 2

you can use 'mousedown' 'mouseup' events in combination with "event.which".

example: http://jsbin.com/ikahe/edit

Answer 3

If the link is on your site then track it when the page loads instead of on the page where they get the link. If the link is to another site you need to use a redirect url so your site can track it(example:http://yoursite.com/redirect.html?redirect=http://othersite.com).

In the redirect page you might do something like this(if you want to use javascript):

$(document).ready(function(){
  //insert your tracking code here...

  var redirect = getParameterByName('redirect');
  if(redirect != ''){
    window.location = redirect;
  }
});

//From http://stackoverflow.com/questions/901115/get-querystring-with-jquery/901144#901144
function getParameterByName( name ){
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
    return "";
    else
    return results[1];
}