Search
Free Signup | Login
Search Articles
Topics
Article List
Article Archive
Relevant Links
The Infamous JavaScript void() Function
Location: BlogsRevindexJavaScript    
Posted by: revindex 7/5/2007 12:06 AM

Once in a while, I have a need to use a HTML hyperlink to perform client-side behavior like open a new window, modify a field or any imaginable DHTML task. There's actually a few ways to accomplish that and prevent the hyperlink from firing a web navigation to another page. Some people prefer to use a static anchor (#) for the href and specify and onclick event.

 <a href="#" onclick="window.open('page.html', '', '')" >Visit me</a>

Another way is to return a false value in the onclick event and use an inline javascript on the href:

  <a href="javascript:window.open('page.html', '', '')" onclick="return false" >Visit me</a>

I personally prefer to keep everything on the href. The problem with this approach is that the browser will still navigate away because the window.open function returns a handle to the newly created window and the hyperlink thinks that's the URL being passed in. A little infamous function called void(0) takes care of the problem by silencing the event.

 <a href="javascript:void(window.open('page.html', '', ''))" >Visit me</a>

The void(0) function actually returns null and works wonderfully by cancelling the page load. Older browsers do not recognize the void(0) function. As such, you might see people implement the void(0) function themselves.

function void(obj) { return null; }

So be sure to test different browsers before using it and have fun!

Permalink |  Trackback

Comments (6)   Add Comment
Re: The Infamous JavaScript void() Function    By VIPStephan on 7/16/2009 8:28 AM
Not only is using this method very outdated, now, in 2009, it’s even not at all clear to me that when you have an anchor that actually does nothing (e. g. if JavaScript is not available) why you would have an anchor at all?

If you have some element whose only purpose is to do something dynamic with JS (e. g. execute something on click) then you can use any element, it doesn’t have to be an anchor, especially when an anchor doesn’t make any sense. Furthermore if this element does nothing without JS then why not generate it with JS in the first place? This way you don’t have a useless, non-functional element if JS is disabled or otherwise not available.

This all is part of progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) which has been around a long time already. Please help make the internet a better, cleaner place.

Re: The Infamous JavaScript void() Function    By Anonymous on 7/16/2009 9:05 AM
Hi. it's good to use anchor because as a web designer you can easily apply the same css style across all the links by the "a" tag and still have the "click here" link show up with a consistent look-and-feel like other links yet perform a different behavior than a normal anchor would.

Re: The Infamous JavaScript void() Function    By Ted Hopp on 8/19/2009 10:01 PM
Anonymous makes a good point. I would also add that, without an href attribute, browsers will not change cursor shape when hovering over the link. The lack of that visual feedback can be misleading. As a matter of aesthetics, I don't like javascript code (or a cryptic '#') showing up in the browser's status bar. I prefer something like:



or, if function respond() happens to always return a false value:



That way, status bar will display the current location. A sensible alternative would be to set href to a url that provides fall-back functionality when javascript is disabled.

Finally, and totally off topic, I'd add that the user experience will also be improved on some browsers by including a title attribute in the anchor tag.

Re: The Infamous JavaScript void() Function    By Ted Hopp on 8/19/2009 10:05 PM
Yikes. That didn't come out too well. Let me try the last part again.

I prefer something like:

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

or, if function respond() happens to always return a false value:

<a href="" onclick="return respond()">

That way, status bar will display the current location. A sensible alternative would be to set href to a url that provides fall-back functionality when javascript is disabled.

Finally, and totally off topic, I'd add that the user experience will also be improved on some browsers by including a title attribute in the anchor tag.

Re: The Infamous JavaScript void() Function    By Tired man on 10/27/2009 9:49 PM
In ie6, a return false on the onclick handler is not enough, you need to add a javascript:void(0); in the href otherwise, you will end up with a race condition.

Re: The Infamous JavaScript void() Function    By Jason on 10/28/2009 11:30 AM
All browsers I have tested accept cursor:pointer; as a style. If it's not a link, don't anchor it, it's nonsensical or so I have read.

Easiest way around an anchor that isn't an anchor is to not make it an anchor and style it silly.

Who want's anything to say 'click here' though? I hope you meant the pointer cursor. Surely you could use the alt attribute if text is necessary.


Your name:
Title:
Comment:
Add Comment   Cancel