HTML Link javascript execute on right click or shift click (open in a new window/tab)

Question

Opening a JavaScript-based link in a new window/tab.

I have a link

<a href='/page' onclick='trackClick()'>Page</a>

What I believe is happening here is that the trackClick() function may not have enough time to execute before browser redirects to a new page. (BTW: Am I wrong here?)

To workaround that, I have changed the html to

<a href='#' onclick='trackClick('/page')'>Page</a>

where trackClick function would redirect to a next page after it has sent a signal to analytics endpoint to avoid racing condition.

As a result, "shift+click" or "right+click open in a new window" now will not open the the /page in a new window/tab.

What's the best way to overcome this? How likely for the browser to not wait for the onclick event to finish before redirecting to a next page?

thank you

Jon P · Accepted Answer · 2018-07-18 00:38:06Z

3

The short answer is, onclick != right click.

For a quick and dirty demo

<script>
  function leftClick() {
    alert("click");
  }

  function rightClick() {
    alert("right click");
  }

  function mouseDown() {
    alert("Mouse down");
  }

  function mouseUp() {
    alert("Mouse up");
  }
</script>
<a href="http://www.google.com" onclick="leftClick()">CLick Me</a><br>
<a href="http://www.google.com" oncontextmenu="rightClick()">Right CLick Me</a><br>
<a href="http://www.google.com" onmousedown="mouseDown()">Any Click Me</a><br>
<a href="http://www.google.com" onmouseup="mouseUp()">Any Click Me</a><br>

So what you actually want is:

<a href='/page' onclick='trackClick()' oncontextmenu="trackClick()">Page</a>

Or maybe

<a href='/page' onmouseup='trackClick()' >Page</a>

Better sill look at using unobtrusive handlers and the mousedown and mouseup events

How likely for the browser to not wait for the onclick event to finish before redirecting to a next page?

The onclick will complete. If you were to return false from a click handler the navigation will not occur at all. Demo

edited Jul 18, 2018 at 0:38

answered Jul 18, 2018 at 0:19

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kaiido Over a year ago

arguably, contextmenu is not right click either... You can very well trigger a contextmenu from an other input (some keyboards have a contextmenu key). Right click would be mousedown=>e.buttons===2 + mouseup=>e.buttons===2

Jon P Over a year ago

@Kaiido, you are correct, I was trying to keep it simple, perhaps I've over simplified it.

Kaiido Over a year ago

Well the real problem is that your code won't track page opening per se, and if user opens the contextmenu multiple times, without ever clicking "open in new tab/window", you'll have tracked false positives. (same for mouseup, + if you don't check that mousedown was also made on the same element, you'll also track false clicks)

Jon P Over a year ago

Yeah, we know nothing about trackClick() it could be attempting to trace the element clicked on a page to cause a navigation event, not the target page load.

Kaiido Over a year ago

In that case setting the href directly to the correct value would be the correct solution.

|

Collectives™ on Stack Overflow

HTML Link javascript execute on right click or shift click (open in a new window/tab)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related