The dangers of embedding the notorious “void(0)” JavaScript code in the href attribute of the “a” tag

I recent ran into an interesting IE bug involving the following bit of html code:

<a href="javascript: void(0);" onclick="dosomething();">click me</a>

I honestly did not write this one but I will leave names out of this to protect the innocent =)

The void(0) JavaScript code is usually used to prevent loading or reloading of the page when the user clicks the link.

What we were trying to do here was have the dosomething JavaScript function execute when a user clicks on the link. This works fine in FireFox, Chrome, Safari but not IE. When a user clicks on the link in IE, nothing happens: i.e. (no pun intended) the JavaScript does not execute.

It took us a good amount of time to realize what the issue was with IE. It turns out that the void(0) function was preventing the onclick event to fire.

Although it may not be pretty, this is what we ended up doing and it appears to be cross-browser friendly:

<a href="<?=$_SERVER['PHP_SELF'];>#" onclick="dosomething(); return false;">click me</a>

Update: Here is an updated version of the code that accounts for users with JavaScript disabled:

<a href="[alternative link]" onclick="dosomething(); return false;">click me</a>

Thanks Ulrich for the suggestion! In this version, if a user has JavaScript disabled, a click on this link will take them to the [alternative link]. If JavaScript is enabled, then dosomething() will execute and the return false will prevent the browser from going to the [alternative link].

Anyway, I hope this helps someone out there in the universe.

Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

4 thoughts on “The dangers of embedding the notorious “void(0)” JavaScript code in the href attribute of the “a” tag”

  1. I think the best way to do this is
    href=”alternativelink” onclick=”dosomething(); return false;”
    If someone has javascript enabled, dosomething() will be executed.
    If javascript was disabled by the user, you provide an alternative with alternativelink. This is especially important, if you want to open a new page/image in a new window for example. Many people want to open the page or image in a new tab and use middle click on the link. But this only works if you provide alternativelink.

    1. You are right. There are actually a lot of things wrong with this post and I do regret writing it. Using ‘#’ is definitely not the way to go. I will probably rewrite this one day using your recommendation amongst other versions. Thanks for your feedback.

  2. You don’t need to use PHP for that; just use href=”#” for that purpose. But this has the annoying side effect of snapping the cursor up to the top of the page. This can be cured by altering the onclick to return false:

    a href=”#” onclick=”dosomething(); return false;”

    Alternatively, have dosomething() return false, and use

    a href=”#” onclick=”return dosomething();”

    Personally, I prefer to use this format:

    a href=”javascript:dosomething()”

    This doesn’t navigate away from the page in modern browsers – and let’s face it, who cares about supporting Netscape 4.04 these days? Browsers that old are pretty much not-found, if you’ll excuse the pun!

Leave a Reply

Your email address will not be published. Required fields are marked *