Featured Posts

Web Presense Solution I've officially started up my independent web development side-business. I am hoping to bring quite a few small businesses into the present with a simple, cost-effective package that provides them with...

Readmore

MS SQL date / time conversion I often find myself turning to MSDN to get the possible conversion options on MS SQL's date data type, so I finally became un-lazy and created a little script to use in the future to quickly list all possibilities...

Readmore

jQuery Delay Happy Note: I was contacted by the jQuery team and my code is being added to the core functionality; that really made my day!  You will want to remove the current code from your site if you plan on upgrading...

Readmore

ASP Search Stemmer Class The original stemmer class was developed by Martin Porter to bring words back to their word stems. For example "abilities" would stem to "able", "smelling" to "smell", "I'm awesome" to "damn straight",...

Readmore

  • Prev
  • Next

Javascript href Voids and More

Posted on : 07-07-2009 | By : chelfers | In : HTML, Javascript, Web

2

- If you are a web developer raise your hand. *raises hand*
- If you have ever referenced Javascript for a link address raise your hand. *raises hand*

I'm sure there are many guilty developers out in the wild who use the age old classic

<a href="javascript:function();">Click Here</a>

A basic explanation is this little call tells the browser to call the function provided after "javascript:" when the link is clicked. Great, so we have an easy way to call a function using a link! What if I wanted the user to click the link and have the page do nothing? Easy!

<a href="javascript:void(0);">Click Here</a>

Awesome! Now when the user clicks the link the browser interprets void(0) as stop right there, don't do a thing. The problem is "javascript:" wasn't exactly meant for this sort of use and some quirky stuff can happen ( obviously the keyword is there for a reason, but that does not make it a good one).

So what is the solution? Our trusty old pound sign, an onclick trigger, and of course a tiny bit of Javascript.

<a href="#" onclick="return false;">Click Here</a>

This will give the same end result as using void(0) and it is the correct way supported by all major browsers; hell some browsers specifically state to avoid "javascript:" in any link addresses, but this is the web, who sticks to standards?

If you really want to be anal about the whole thing and want to argue about Javascript being enabled on the browser ( which you should be sniffing for anyways if you really care that much ) you could do the following.

<a href="backupFunctionalityPage.php" onclick="YourFunction(); return false;">Click Here</a>

This will take the user to the page set by the href if and only if Javascript is disabled, but then I ask myself why not just push them to that page as the default?

Anyway, here is an example showing the bad and better ways of doing this for those that might need a side by side.

<script type="text/javascript">   function Testing(){ alert('hio'); } </script> //BAD <a href="javascript:Testing();">Click Here</a> //Better <a href="#" onclick="Testing(); return false;">Click Here</a> //BAD <a href="javascript:void(0);">Click Here</a> //Better <a href="#" onclick="return false;">Click Here</a>

Hope everyone had a good 4th of July weekend!