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:
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.
;){kind=link}
){kind=link}
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!!!
Reply
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."
Reply
Show the rest of this thread
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.
Reply
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?
Reply