How do you cancel your href="javascript:void(null)"?

Question

I've recently been bitten by the javascript:void(null); bug in my hrefs when applied to images.

In my version of Safari (4.0.3 in Leopard PPC) when I apply an href of javascript:void(null); around an image, the image completely disappears from the layout. Looking around I see this happens in IE as well though I cannot confirm.

I've read using the pound sign (#) with an onclick handler

onclick="return false;"

This works, but I hate having the pound appended to the url.

I know there are various techniques, So how do you handle your hrefs?

Answer 1

I put valid URLs in my hrefs. Why are you making links that don't do anything?

 <span onclick="doSomething();" class="fakeLink"><!-- active elements --></span>

Answer 2

Like this

<a href="#" onclick="doSomething(); return false;">

Or preferably

<a href="nonJavascriptAlternative.html" id="foo">

then attach a handler with javascript - in jQuery

$('foo').click(function() { doSomething(); return false; });

Answer 3

Don't use # for the reason you mentioned and on some browsers, if the user is scrolled away from the top clicking the link will jump them back to the top. I use this:

<a href="javascript:"><img src=""/></a>

That shouldn't cause a problem on any browser (at least I haven't had a problem yet).

Answer 4

If you return false onclick, the click action is cancelled so # won't be appended to the url

<a href="#" onclick="return false;">

Answer 5

My preferred option is

<a href="non_javascript_alternative.html" onclick="doSomething(); return false;">

... where possible (which isn't always). Having the event handler in the attribute has the following benefits over attaching the event after the document has loaded:

1. Simplicity
2. Clarity
3. Compatibility
4. JavaScript event handler will function even before the document has loaded.