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

by Jon Davis 27. October 2010 18:31

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.

UPDATE 10/28/2010 1:40 PM: Per the comments below, there are other, perhaps even better approaches you can take. First, if the onclick function returns false, the navigation will be cancelled. (Truthfully, I may have forgotten about this, so I cannot verify this without testing and I don’t want to take the time to test at the moment, but I’ll take bruce’s word for it.) Second, you can also cancel the click event entirely with the event DOM object “by calling `event.stop()` or `event.preventDefault()`”. Thanks Dimitar.

Currently rated 2.7 by 7 people

  • Currently 2.714286/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading




 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  October 2020  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar