href="javascript:" vs. href="javascript:void(0)"

Question

Our web app is rendered totally on the browser.
The server only talks to the browser through JSON messaging.

As a result, we only need a single page for the app and mostly all the <a> tags do not have a real href pointing to other pages.

In my quest of removing unnecessary things I was wondering if I can get rid of the zillions of void(0) we have in our code, as they seem useless:

<a onclick="fn()">Does not appear as a link, because there's no href</a>
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

Does anybody knows if using href="javascript:" can cause a problem?
It works even on IE7...

Please don't spend your valuable time to tell me inline javascript is bad, as this is generated by a template engine :)

• Nick Craver: Inline JavaScript is bad :)
• Mic: @Second Rikudo, the question you refer to as duplicate was asked a year after this one
• Madara's Ghost: @Mic Apologies, I got to this question from the review queue and didn't notice the date (and more importantly, that this question had better answers). I'll reverse the direction of the duplicate.

Answer 1

It does not cause problems but it's a trick to do the same as PreventDefault

when you're way down in the page and an anchor as:

<a href="#" onclick="fn()">click here</a>

you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

regarding your examples

<a onclick="fn()">Does not appear as a link, because there's no href</a>

just do a {text-decoration:underline;} and you will have "link a-like"

<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

it's ok, but in your function at the end, just return false; to prevent the default behavior, you don't need to do anything more.

• Mic: I thought the link didn't work without href, but it works, it is just the default underline and cursor that does not appear. Removing the href altogether could be what I'm looking for. I'll do some check.
• Mic: The link can't be tabbed(and get the focus) without href, too bad.
• balexandre: just put href="#" no problem with that if your function returns false at the end, so it prevents the link behavior - u can test it here: jsbin.com/ipoda3
• balexandre: new revision so you can see the behavior when you have scroll bar on the browser: jsbin.com/ipoda3/2
• Mic: I use already the hash key(#) for the navigation and state in my page. I could use href="#" but then have to add to all my links return false which is not an improvement compared to what I have today.

Answer 2

When using javascript: in navigation the return value of the executed script, if there is one, becomes the content of a new document which is displayed in the browser. The void operator in JavaScript causes the return value of the expression following it to return undefined, which prevents this action from happening. You can try it yourself, copy the following into the address bar and press return:

javascript:"hello"

The result is a new page with only the word "hello". Now change it to:

javascript:void "hello"

...nothing happens.

When you write javascript: on its own there's no script being executed, so the result of that script execution is also undefined, so the browser does nothing. This makes the following more or less equivalent:

javascript:undefined;
javascript:void 0;
javascript:

With the exception that undefined can be overridden by declaring a variable with the same name. Use of void 0 is generally pointless, and it's basically been whittled down from void functionThatReturnsSomething().

As others have mentioned, it's better still to use return false; in the click handler than use the javascript: protocol.

• Mic: I agree with all this but the last point. The return false is as useless as void(0) unless you use a real href
• Andy E: @Mic: You need return false; if you're using href="#" otherwise the document scrolling is reset. Of course, if you're using javascript: in the link, return false would prevent that script from being executed anyway, so in that sense it would be useless.
• Yi Jiang: The problem with attaching event handlers to an anchor with a real URL in the href field is that in case the user activates the link in another manner (eg. pressing enter while anchor is focused, middle mouse button), even if he has Javascript, the href is still followed (expected behavior, of course, but annoying nonetheless)
• Andy E: @YiJ: pressing enter on a link will fire the onclick event. Not sure about middle mouse.
• Yi Jiang: @Andy Happened to me on Firefox, for the middle mouse. I was using this method as a fallback for users without Javascript, but then noticed this behavior during testing. The event handler will not fire, and the href link will open in a new tab.

Answer 3

Using 'javascript:void 0' will do cause problem in IE

when you click the link, it will trigger onbeforeunload event of window !

<!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
 alert( 'oops!' );
};
</script>
</body>
</html>

• ygoe: Not anymore in IE 11, so that's history now.

Answer 4

This method seems ok in all browsers, if you set the onclick with a jQuery event:

<a href="javascript:;">Click me!</a>

As said before, href="#" with change the url hash and can trigger data re/load if you use a History (or ba-bbq) JS plugin.

Answer 5

you could make them all #'s.

You would then need to add return false; to the end of any function that is called onclick of the anchor to not have the page jump up to the top.

• Mic: I use the # key already for navigation and state purpose. It is common in single page web apps. So I can't use #
• Mic: I wanted to check if there is no trouble removing the void(0). If I use href="#" instead, I need to add a return false to all the onclick. It is not any better I think.

Answer 6

I usually do not use any href and change the aspect with css, making them seems link. Thus you do not have to worry about link effect at all, except for the event handler of your application

a {
 text-recoration: underline;
 cursor: pointer;
}

Answer 7

javascript:void(0);

The snippet above executes void function and returns undefined. This could have issues with IE.

javascript:;, this does nothing. safest to create dead links. '#' this means pointing to same DOM, it will reload the page on click.

Answer 8

Why have all the click events as a href links?

If instead you use span tags with :hover CSS and the appropriate onclick events, this will get around the issue completely.

• Mic: This is quite radical. While it make sense. I don't know... I need A tags for links. ie: for tabbing, a SPAN won't get the focus
• Yi Jiang: @Mic If tab focusing is all you worry about, giving the span an tabindex will allow it to become focusable.
• Peter Bridger: @ji-jiang Indeed, IE6 likes to stick it's nine year old heel in where ever it can :)
• Mic: @ji-jiang Being picky, replacing "<a href..." by "<span tabindex...", plus having to handle myself the tabindex is not really a win
• ncubica: I dont recommend this. what happened with all the good semantic and best practices for accessibility, a span is a text holder in first place not a LINK or action event, if you want to use another tag instead of <a href=> you should go absolutely with input type="button" imho.