logo

Using the void operator in anchor links

Have you noticed that if you create a URL that calls a JavaScript function or method, in which an object gets returned but the browser is not told what to do afterwards, the browser will then do something like this:

Image

For example, click on the following pseudo-URL (remember - use the back button to return here) :

JavaScript:window.open('/icons/vwicn012.gif', 'test', 'width=200,height=200');

This happens becuase the browser thinks it should open the JavaScript as an explicit URL. Did you notice that the address box of the browser changed?

Placing the void operator in front of the JavaScript call will solve this. The void unary operator tells the browser to evaluate the following expression but ignore the value it returns.

Try it now by clicking on the link below:

JavaScript:void window.open('/icons/vwicn012.gif', 'test', 'width=200,height=200');

The browser no longer misbehaves when you open the window.

On an aside, there is another way around this. You can place the url call in to the anchor tag using the onClick event and having a href attribute that points nowhere.

<a href="#" onClick="window.open('/icons/vwicn012.gif', 'test', 'width=200,height=200');">I don't like this method</a>


But I would consider this more of a "workaround" than a solution.

As a rule I always tend to include it whenever I place JavaScript inside the href of a link. Better safe than sorry. Unless, of course, you expect the link to be the returned object from the JavaScript call.


Feedback

  1. Another method...

    I have had many problems with A HREF links that do not go anywhere, the reason for these links is usually because you want the onClick event to do the page loading for you. I have found that using <A HREF="#" onClick="...">seems very dependent on browser version and often will not work (certainly not in IE5). Here is another method that also works, it may well act differently on the browser versions but it works in IE5, add it to your prtfolio...

    <A HREF="Javascript:onClick=history.go(-1)" TARGET="_parent">Back</A>

    Of course the other alternative is to simulate your own <A> link using styles!!!

    1. Re: Another method...

      What seems to work best for me is a subtle variation that combines both approaches (and so far, appears to work for me in just about any browser!). Try the following:

      <a href="javascript:void 0;" onClick="void window.open('/icons/vwicn012.gif', 'test', 'width=200,height=200');">How's this?</a>

      'void' requires an argument, but it doesn't care what, hence the 0). The reason I took this approach, is because it appears that some browsers (which ones escape me at the moment) follow the logic of "execute the onClick handler, then follow the link specified in the 'href' attribute." Having the 'void 0' statement in the href guarantees that the link doesn't "go anywhere."

      Show the rest of this thread

  2. Problems using anchor links

    One problem you get if you use an anchor like that:

    i.e <a href="#" blah blah>

    ... is that if you have a long form, and you are doing validation or using javascript to pop-up a child form, the anchor link will cause your form to "jump" back up to the top of the form (it's looking for a bookmark labelled "#") .. which might not be very convenient if the user was half-way down the form filling something out.

    You can set focus in your javascript function back to the field object that the user was working on (if it's an object that can take a focus) .. but that causes the form to jump around which is ugly.

    Jake's suggestion to use a straight onclick="javascript:void yourfunction();" in your href is better.

    • avatar
    • caue
    • Thu 24 Jun 2010

    i use orkut, and new users on orkut, only have the new orkut, i want to use the old version. in others users, the link for the old version is javascript:void(0) and i want to copy the script and execute in the other user to use the old version, is there any way?

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "JavaScript"

« Previous Article Next Article »
Date validation on global servers   Limit the types of files users can upload

About This Article

Author: Jake Howlett
Category: JavaScript
Keywords: Return; window; confirm;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »