Question

For example, the link below triggers something in jQuery but does not go to another page, I used this method a while back ago.

<a class="trigger" href="#"> Click Me </a>

Notice theres a just a hash tag there, and usually causes the page to jump when clicked on, right? [I think]. It is only for interactive stuff, doesn’t go to another page or anything else. I see a lot of developers do this.

I feel like its the wrong thing to do though. Is there another recommended way to do this without using HTML attributes a way where it is not suppose to be used?

Not using <button> ether because the link would not be a button.

Maybe without a hash?

<a class="trigger"> Click Me </a>

& in CSS:

.trigger {
 cursor: pointer;
 }

So the user still knows its for something that you should click?

Answer 1

Don’t remove that hash.

It’s true that under (modern, at least) versions of Firefox, Chrome, Opera, and Safari, an anchor tag with an empty href (i.e. href=””, not a missing href) will display as a normal link that simply doesn’t respond when clicked, unlike the hash-href which jumps to the top of the page. Internet Explorer, however, takes a different approach.

When a link without an href is clicked in Internet Explorer, it responds by opening your Desktop directory in Windows Explorer. I got this response in IE7 and IE8 (IE6 just crashed, though that could be unrelated – I’ve had issues with that VM).

If a user browses your site in IE with JavaScript disabled, do you really want all your links to open their Desktop? I think not.

Also important is that removing the href attribute from an anchor element entirely causes it to be rendered as plain text – i.e. it doesn’t act as a link, you can’t tab to it, etc. Not good.

---

As for controlling the behaviour of the link when clicked, @partoa has the right, but possibly incomplete answer.

I’m no JavaScript guru by any stretch of the imagination,but from what I’ve read you don’t want to use return false; for this. According to this article I came across a while ago, return false; has some additional behaviours you might not actually want. It recommends you just use preventDefault to stop the links normal behaviours (i.e. navigating to a new resource). Read over that link to see what return false; really does before deciding how you want to handle it.