Dear Javascript Guru: Please Stop Using The Hash Symbol For No-Op HREFs

This is evil:

<a href="#" onclick="doSomething()">click me</a>

I’m not talking about the onclick attribute (we’ve learned to late-bind such handlers with unobtrusive scripting), I’m talking about the href=”#”. This is a minor thing but now at the year 2010 it has become a genuine pet peeve of mine. HTML has been around since the early 90s and Javascript commonplace since ‘95 or ‘96. I started getting into web design and development in ‘96. So believe me when I say that if you are putting a pound symbol, or ‘#’, into your <a href="#" onclick="..">’s, you’re not tricking anyone with some brilliant idea because we were doing that back then. Actually, you’re annoying people.

That pound symbol has meaning to a web page. It is a bookmark identifier, i.e. #Your-Bookmark, or <a href="#Your-Bookmark">, which will navigate the browser to the place on the same page where the specified bookmarked item is named with <a name="Your-Bookmark">. So if the bookmark name in the link tag is blank, it will do nothing, right? WRONG! It will add another history item to the navigation history, and then it will scroll to the top of the page.

“But what if we have an onclick event and we want the text to appear as a hyperlink but don’t want the browser to go anywhere?” First, go back to school, this is elementary knowledge.

There are a few approaches you can take to do what you were trying to do here, without using the hash symbol.

Approach 1: Use CSS.

Try using <span class="scripted-link" onclick="alert('better');"> and then in CSS use .scripted-link { text-decoration: underline; cursor: pointer; }. See?! That wasn’t hard! This will cause the “link” text to look and feel like a hyperlink but it’s all just style. The text-decoration: underline will cause the text to appear as underlined (you can re-style this however you want, of course), and the cursor: pointer causes the mouse to turn into a hand when the user hovers over it. But if that’s too much work for you, here’s another approach.

Approach 2: Use javascript:void(0);

If you insist on using <a href>’s then use javascript:void(0);, i.e. <a href="javascript:void(0);" onclick="alert('better');" class="script-link">click me</a>. The statement “void(0);” does what it sounds like it does—it performs a noop (no-operation) function execution. In other words, it’s saying “do nothing”.

Here’s another little tip: If you want the user to see what the link will do, add two slashes and an explanation, i.e. <a href="javascript:void(0); // vote Green" onclick="vote('green');">Green</a>. This will cause the browser’s status indictator to show “javascript:void(0); // vote Green”, which looks ugly but at least it’s more informative to a smart user than just showing “javascript:void(0);”.

Yes, this is a bit more typing than using a hash symbol, but this is the only technically correct implementation of what you were trying to accomplish in the first place, plus it keeps your scripting efforts separated from the CSS guru’s efforts.

Approach 3: Declare The Function Outright, Then Return False

If you want to combine the HREF and the onclick handler, you can also just execute the handler as the href target outright,

<a href="javascript:doSomething()">click me</a>

The only caveat is that this function must return false or void, or else the page may navigate to an empty screen. If it doesn’t return false, you can force it to return false or void inline:

<a href="javascript:doSomething(); void(0);">click me</a>

Yes, I am posting this because I just came across yet another web page produced by people who should know better where I clicked on a link and it just scrolled to the top of the page because the HREF value was “#”. STOP THAT. I don’t ever want to see another hash symbol as the HREF value again, there is never any valid reason for it to be there. Use "javascript:void(0);" instead, and the world will be a better-functioning place—or at least its web will.