Menu
I'm new to web-design and javascript, and I don't understand why it's common for web designers to use the void(0) syntax below:
<a onclick="this.blur();return false;" href="javascript:void(0);" class="btn">
Since this actually shows itself in the lower left hand corner of the browser, why not come up with a way to make it more user friendly? Maybe it's because designers don't have the time to do this kind of UI tweaking.
What would you suggest as an alternative to the above syntax that would be more helpful to the end-user?
628
The href= “” will only load the current page, while href= “#” scrolls the current page to the top, while href= 'javascript:void(0)' will do nothing at all. The same effects of javascript:void(0) are realized by returning false from the click event handler of the <a> tag with either of the two methods.
With void , it tells the browser not to return anything (or return undefined ). Another use case of links with the javascript:void(0) reference is that sometimes, a link may run some JavaScript code in the background, and navigating may be unnecessary.
JavaScript void 0 means returning undefined (void) as a primitive value. You might come across the term “JavaScript:void(0)” while going through HTML documents. It is used to prevent any side effects caused while inserting an expression in a web page.
Generally, you want to avoid href="javascript:void(0)" , as it will cause the browser to parse the value of the link URL, which is both costly and unnecessary. It also introduces a potential XSS security vulnerability, as javascript: URLs violate Content Security Policy (CSP).
The ideal solution is to build on things that work.
This article discusses progressive enhancement leveraging the Yahoo User Interface Library javascript library to improve accessibility of javascript simulated interaction events.
cite: Christian Heilmann
76
If it's simply end-user helpfulness then this might do?
<a onclick="this.blur();return false;" href="#Click to hide" class="btn">
since you're returning false anyway it could actually contain anything
<a onclick="this.blur();return false;" href="Click to hide" class="btn">
However, I think the reason for it is, if you have javascript disabled, it will actually have no effect, as opposed to writing something else there which will (the first example will change the hash/anchor-part of the url, the second will probably result in an error). Either way they'll still look funny though (prepended with the original url).
Then again, if this thing is only visible due to javascript, I'd say go ahead and assume javascript is available. Although I'd still err on the safe side and use the hash anyway... :)
Edit:
I just realized not all browsers show the '#' part of a href in the status-bar (does any browser do that?), so I'd use the javascript:void(0); or simply # if you're not using anchors for anything, and set the title attribute to something descriptive instead.
Edit:
I think I was a bit too fast... I think the javascript:void is indeed to avoid having any effect. However, a better solution would to not use a-tags at all (I usually just slap the onclick onto anything, actually I usually use jquery, and add it to certain classes or IDs afterwards).
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
