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 :)

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.