CODEWITHSUNDEEP
javascriptuser-interfaceonclickvoid
makerofthings7
makerofthings7

Reputation: 61473

Why use 'href="javascript:void(0);"' instead of something more user friendly?

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?

Upvotes: 5

Views: 10402

Answers (2)

Quentin
Quentin

Reputation: 944010

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

Upvotes: 8

falstro
falstro

Reputation: 35667

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).

Upvotes: 1

Related Questions