<a href="javascript:void(0)" id="loginlink">login</a>
I've seen such hrefs many times, but I don't know what exactly that means.
views:
1665answers:
5
+13
A:
It means it'll do nothing. It's an attempt to have the link not 'navigate' anywhere. But it's not the right way.
You should actually just 'return false' on the onclick event, like so:
<a href="#" onclick="return false;">hello</a>
Typically it's used if the link is doing some 'javascript-y' thing. Like posting an ajax from, or swapping an image, or whatever. In that case you just make whatever function is being called return false.
To make your website completely awesome, however, generally you'll include a link that does the same action, if the person browsing it chooses not to run JavaScript.
<a href="backuppagedisplayingimage.aspx" onclick="return coolImageDisplayFunction();">hello</a>
Noon Silk
2009-08-18 05:21:36
href="#" will add a "#" to the url,which is ugly.
Shore
2009-08-18 05:35:20
It not only adds # to the url but also takes the focus to the top of the form.
rahul
2009-08-18 05:38:07
so it's not a good idea to use "#".
Shore
2009-08-18 05:39:11
no no - return false will stop the default behavior, so the # will never appear
Magnar
2009-08-18 05:43:56
Phoenix and shore: return false will prevent the link from ever evaluating. It won't go anywhere, nor will it change focus to the top of the page.
Noon Silk
2009-08-18 05:45:10
Ok,but I still like the void version better,since it won't bother onclick attribute,all in a nutshell.
Shore
2009-08-18 05:49:57
shore: that's your preference. but it's not the 'correct' way.
Noon Silk
2009-08-18 05:50:36
@silky, I'm just curious what makes it the 'correct' way? I'm not saying you're wrong, because I do it the way you've mentioned, but I do it just because thats the way I learned to do it. Is this actually based off a standard or something?
Brandon
2009-08-18 05:53:07
the javascript: url protocol is a defacto standard, not a real standard. So the href="#" onclick="return false;" is standards compliant while href="javascript:void(0)" is not, because there is no official standard that specifies what that should do.
Breton
2009-08-18 05:55:42
On top of that, Douglas Crockford doesn't like void, so jslint will complain about it. Basically, since void is an operator, and not a value, it's confusing as hell, and spawns many questions such as this one. Better to avoid it altogether. haha.
Breton
2009-08-18 05:57:12
Brandon: see brenton's responses. The way I recommend is the most supported and as I said in the second part of my post, in a 'proper' site you won't ever even use '#', because you'll be providing fallback systems to handle a lack of javascript.
Noon Silk
2009-08-18 06:00:55
Ahem.... who's brenton?
Breton
2009-08-18 06:16:15
Uhh.. very sorry sir, completely misread your name :)
Noon Silk
2009-08-18 06:19:10
+1 for including the *completely awesome* example. Even if you have no static HTML fall-back for what you're doing in JavaScript, you can always do something like `<a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">`.
Grant Wagner
2009-08-18 18:29:41
+8
A:
The void operator evaluates the given expression and then returns undefined.
The void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0"). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
Explanation is provided here.
The reason you'd want to do this with the href of a link is, normally a javascript: url will redirect the browser to a plain text version of the result of evaluating that javascript. That is, unless the result is undefined, then the browser stays on the same page. void(0) is just the smallest script possible that evaluates as undefined.
rahul
2009-08-18 05:23:10
"normally a javascript: url will redirect the browser to a plain text version of the result of evaluating that javascript. "Can you make an example here?I've never seen such usage.
Shore
2009-08-18 05:40:39
if your write a javascript function on onclick and if the javascript functin returns false then this false will be shown in the browser
rahul
2009-08-18 05:42:00
An example of what phoenix is talking about is <a href="javascript: dosomething();">DO IT NOW! </a>. If dosomething returns false, then clicking the link will simply cause the browser to exit the page and display "false". However... <a href="javascript: dosomething(); void(0)">DO IT NOW! </a> avoids the problem. Go ahead and paste javascript: 1+1; into your browsers address bar. The browser should display "2"
Breton
2009-08-18 05:50:03
@Breton ,thank you.Got it.But why don't we use "javascript:void()",I mean,why is "0" needed here?
Shore
2009-08-18 05:52:50
Because void is a unary operator. Void is not a value, nor is it a function. It needs a value to operate on to its right, or it will throw an error.
Breton
2009-08-18 05:59:13
try looking in the error console? It definetely throws a syntax error. It's invalid javascript. Douglas crockford reccomends staying away from void because of the unary operator/function/value confusion is too costly to deal with.
Breton
2009-08-18 06:05:03
+2
A:
You should always have an href on your a tags. Calling a Javascript function that returns 'undefined' will do just fine. So will linking to '#'.
Anchor tags in IE6 without an href do not get the a:hover style applied.
Yes it is terrible and a minor crime against humanity, but then again so is IE6 in general.
Hope this helps.
EDIT: IE6 is actually a major crime against humanity
jscharf
2009-08-18 05:25:24
A:
There is a HUGE difference in the behaviour of "#" vs javascript:void
"#" scrolls you to the TOP of the page while "javascript:void(0);" does not.
This is very important if you are coding dynamic pages. the user does not want to go back to top just because he clicked a link on the page.
Salvin Francis
2009-08-18 08:25:40
@Salvin: The *scroll-to-top-of-page* behavior can be suppressed by returning `false` to the event handler: `onclick="doSomething();return false;"`, or if `doSomething()` returns `false`, you can use `onclick="return doSomething();"`.
Grant Wagner
2009-08-18 18:25:39
+5
A:
In addition to the technical answer, javascript:void means the author is Doing It Wrong.
There is no good reason to use a javascript: pseudo-URL(*). In practice it will cause confusion or errors should anyone try things like ‘bookmark link’, ‘open link in a new tab’, and so on. This happens quite a lot now people have got used to middle-click-for-new-tab: it looks like a link, you want to read it in a new tab, but it turns out to be not a real link at all, and gives unwanted results like a blank page or a JS error when middle-clicked.
<a href="#"> is a common alternative which might arguably be less bad. However you must remember to return false from your onclick event handler to prevent the link being followed and scrolling up to the top of the page.
In some cases there may be an actual useful place to point the link to. For example if you have a control you can click on that opens up a previously-hidden <div id="foo">, it makes some sense to use <a href="#foo"> to link to it. Or if there is a non-JavaScript way of doing the same thing (for example, ‘thispage.php?show=foo’ that sets foo visible to begin with), you can link to that.
Otherwise, if a link points only to some script, it is not really a link and should not be marked up as such. The usual approach would be to add the onclick to a <span>, <div>, or an <a> without an href and style it in some way to make it clear you can click on it. This is what StackOverflow does: see for example the ‘add comment’ link at the top.
The disadvantage of this is that you lose keyboard control, since you can't tab onto a span/div/bare-a or activate it with space. Whether this is actually a disadvantage depends on what sort of action the element is intended to take. You can, with some effort, attempt to mimic the keyboard interactability by adding a tabIndex to the element, and listening for a Space keypress. But it's never going to 100% reproduce the real browser behaviour, not least because different browsers can respond to the keyboard differently (not to mention non-visual browsers).
If you really want an element that isn't a link but which can be activated as normal by mouse or keyboard, what you want is a <button type="button"> (or <input type="button"> is just as good, for simple textual contents). You can always use CSS to restyle it so it looks more like a link than a button, if you want. But since it behaves like a button, that's how really you should mark it up.
(*: in site authoring, anyway. Obviously they are useful for bookmarklets. javascript: pseudo-URLs are a conceptual bizarreness: a locator that doesn't point to a location, but instead calls active code inside the current location. They have caused massive security problems for both browsers and webapps, and should never have been invented. Thank you Netscape, you idiots.)
bobince
2009-08-18 10:50:44