DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • How To Use Pandas and Matplotlib To Perform EDA In Python
  • Working on an Unfamiliar Codebase
  • How To Manage Vulnerabilities in Modern Cloud-Native Applications
  • Does the OCP Exam Still Make Sense?

Trending

  • How To Use Pandas and Matplotlib To Perform EDA In Python
  • Working on an Unfamiliar Codebase
  • How To Manage Vulnerabilities in Modern Cloud-Native Applications
  • Does the OCP Exam Still Make Sense?
  1. DZone
  2. Coding
  3. JavaScript
  4. Dear Javascript Guru: Please Stop Using The Hash Symbol For No-Op HREFs

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

Jon Davis user avatar by
Jon Davis
·
Oct. 28, 10 · News
Like (0)
Save
Tweet
Share
9.32K Views

Join the DZone community and get the full member experience.

Join For Free

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.

JavaScript

Published at DZone with permission of Jon Davis, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • How To Use Pandas and Matplotlib To Perform EDA In Python
  • Working on an Unfamiliar Codebase
  • How To Manage Vulnerabilities in Modern Cloud-Native Applications
  • Does the OCP Exam Still Make Sense?

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: