difference between href="#" and href="javascript:void(0)"

Discussion in 'JavaScript' started by winterheat, Aug 14, 2008.

0
  1. #1
    If we have a link and we want it to execute a javascript function, there seems to be 5 ways at least:

    <a onclick="foo()">Next Image</a>
    HTML:
    <a href="#" onclick="foo()">Next Image</a>
    HTML:
    <a href="javascript:foo()">Next Image</a>
    HTML:
    <a href="javascript:void(0)" onclick="foo()">Next Image</a>
    HTML:
    <a href="#" onclick="foo(); return false;">Next Image</a>
    HTML:
    method 1 usually won't change the mouse cursor to a "hand cursor", so maybe it is not as desirable in some cases.

    method 2 seems to cause the page to shift to a new location sometimes on IE 6 and IE 7. (to top of page?)

    method 3 ... should work... but is it an old school way and should be avoided for modern browsers?

    method 4 should work well... except in article http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void/
    the author seems to suggest it may break sometimes and try never to use href="javascript:[anything]"

    method 5 may work the best? according to the article above, that may be the best way as it doesn't use href="javascript:[something]" and the return false part will cause the href="#" not to be evaluted, so that's the best way? thanks very much!
     
    winterheat, Aug 14, 2008 IP
  2. rohan_shenoy

    rohan_shenoy Active Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    60
    #2 
    javascript:void(0)
    Code (javascript):
    Its a pseudo-protocol and not recommended for usability and accessibility reasons.
    Google for JavaScript best practices and you will know few more related ones!
     
    rohan_shenoy, Aug 14, 2008 IP
  3. yleiko

    yleiko Peon

    Messages:
    74
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    what about 
    
<a style="cursor:pointer" onclick="foo()"></a>
    HTML:
    so you have got cursor, and you dont need any unnecessary javascript voids
     
    yleiko, Aug 15, 2008 IP
  4. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #4
    Aye, I'd use with no href.

    But just make all links have the hand cursor by putting this in your CSS:

    
a{
    cursor:pointer;
}
    Code (markup):
     
    blueparukia, Aug 16, 2008 IP
  5. rohan_shenoy

    rohan_shenoy Active Member

    Messages:
    441
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    60
    #5
    The advantage of using with href="#url" and onclick event in that the software can be functional even if javascript is disabled.

    For eg: Disable the javascript and then try to rep some user in this forum. You will taken to the reputation page. If you had no href parameter or set it to #, you wudn't be able to give rep with disabled javascript. Thats called as graceful degradation!
     
    rohan_shenoy, Aug 16, 2008 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    I am all for accessibility, and that is definitely the way to do it, but if you don't have a server side equivelant (which you should) or its for flashy effect only, there is no need for a href.
     
    blueparukia, Aug 16, 2008 IP