I have some onClick events in elements, so they get called when a user clicks on a link. This works well, and looks like this:

foo

Unfortunately, if a user opens the link in a new tab (e.g right click->open in new tab), my onLinkClick function does NOT get called. This happens with Firefox (various versions, including the latest one - 1.5.0.1).

Does anyone know if there is a way to work around that and catch even the "open in new tab" clicks/events?

Thanks!

I have some onClick events in elements, so they get called when a user clicks on a link. This works well, and looks like this:

foo

Unfortunately, if a user opens the link in a new tab (e.g right click->open in new tab), my onLinkClick function does NOT get called. This happens with Firefox (various versions, including the latest one - 1.5.0.1).

Does anyone know if there is a way to work around that and catch even the "open in new tab" clicks/events?

Thanks!

• javascript

• 1 Certain browsers can block right click from scripts entirely. I would not remend relying on being able to detect it. – Jani Hartikainen Commented Jun 18, 2013 at 11:48

2 Answers 2

You need to use the preventDefault method for right click.

In jQuery you can do this as:

$(document).on("mousedown", "a", function(e) {
   if( e.which === 3 ) {
      e.preventDefault();
      //do something now
   }
});

Use 1 for left click, 2 for middle click and 3 for right click.

In JavaScript:

<a href="#" onmousedown="mouseDown(event);">aaa</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

function mouseDown(e) {
  e = e || window.event;
  switch (e.which) {
    case 1: alert('left'); break;
    case 2: alert('middle'); break;
    case 3: alert('right'); break; 
  }
}​

Demo

So I was running into this problem and came to the conclusion that modifying the user behavior to disallow opening in new tab and context menu in desktop and mobile was the way to go.

The alternative was keeping external links obfuscated in an internal-redirect link format with nasty query strings. Gotta do numbers on the user experience transparency front so I keep our anchor tags href'd directly to the external resource.

You can prevent the select & callout on mobile in the click and hold as well as the right click on desktop with a bination of the following:

CSS Modifier on the anchors you want people to click:

a {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

As your document loads add this event listener:

window.addEventListener('contextmenu', function (e) { 
  // do something here... 
  e.preventDefault(); 
}, false);

And now all clicks will go through the onClick because for 80% of cases people can't open in new tab, they can only click. People might be confused at first, but you have the benefit of leaving a clear link to your next url despite preventDefault()ing your anchor tags and firing up your user analytics in the onClick handler as you logically would like to. :)

Works in December 2020 on iPhone iOS 14 and Android 9, as well as Chrome and Firefox on Windows 10.