CODEWITHSUNDEEP
javascripthref
ZHAO Xudong
ZHAO Xudong

Reputation: 1411

href="javascript:;" or href="javascript:void(0)", the difference?

I read about the href="#" and href="javascript:void(0)"comparison, I also want to know about the comparison about

href="javascript:;" or href="javascript:void(0)",

ps: I use href="javascript:;" all the time instead of href="javascript:void(0)", have not find any trouble.

Upvotes: 4

Views: 5022

Answers (4)

user229044
user229044

Reputation: 239392

The usual behaviour for a javascript: link is that the document body is replaced with whatever the expression evaluates to, unless it evaluates to undefined. There is no difference between your two versions, they both evaluate to undefined which, in a javascript: link, has no effect.

However, this is not the preferred way of making no-op links. Your needlessly forcing the browser to parse and evaluate JavaScript. If you want to make a link which does nothing, you should be setting its href to "#", and binding functions to the link's click event. Your event handler will be passed an event object; if you want to evaluate some code and then prevent the link from being followed (appending # to the currently URL) then you can use event.preventDefault(), event.stopPropagation(), or simply return false from your event handler.

The best option of all is to maintain some meaningful value in your href attribute, so that if JavaScript is circumvented (IE, the user opens the link in a new window) there is still some sane fall-back. You should then layer additional "rich" actions on top of the existing HTML-only functionality.

Upvotes: 0

Yaroslav Yakovlev
Yaroslav Yakovlev

Reputation: 6483

javascript:void(0) - more easy to understand, than javascript:some_code_to_execute. Sure, in your case javascript:; is not hard to read, is one will not assume code got broken.

Theres several reason, why handling lcicks with javascript: is bad. I know it's not the actual question, but it's related:

  1. This approach is obsolete and as it still supported by browser vendors, it's not in wc3 standards.
  2. Link href="javascript" will not work for users without javascript. It's better to use href="/somePage.com?id=123" onclick="makeActionFor(777); return false">
  3. No separation between the markup and the code. In this case, putting onclick in prev example is also a bad way to attach click handler.

Upvotes: 0

Ja͢ck
Ja͢ck

Reputation: 173642

Using javascript: in hyperlinks in either form is bad. Your JavaScript design should be unobtrusive.

If you're going to attach event listeners to your anchors, you should use the # anchor or even an actual URL, e.g.:

<a href="/delete/post/123">delete</a>
...
<script>
jQuery(function($) {
     $('a').on('click', function(event) {
         event.preventDefault();
         // do ajax stuff
     });
});
</script>

This way, old browsers (or those with JavaScript disabled) will follow a regular link to delete an item whereas JavaScript enabled browsers will do this via AJAX so that the page doesn't have to refresh.

If your link is really meant to do nothing at all, you shouldn't use anchors at all; just style a <span> for that purpose.

Upvotes: 3

Guffa
Guffa

Reputation: 700582

What you put in the href is not really relevant. You should stop the link from being followed in the first place, by returning false from the click handler.

Example:

<a href="fallback.html" onclick="doSomething();return false;">

In the href you can put a link to a fallback solution for users who have disabled Javascript, or a page informing them that they need Javascript to use the featured of the page.

Upvotes: 0

Related Questions