Is there any particular good reason to keep using href='#' on javascript targeted links?

Question

As you all know, it's extremely common to have code like this:

<a href='#' class='edit'>Edit</a>

Which is then hooked up to an event handler (using jQuery or whatever's hip these days)

or even with inline js handlers

<a href='#' onclick='editThis()'>Edit</a>

I know it's a lazy way to show the pointer/hand cursor on the link but that can easily be corrected with just this css:

  a {
       cursor:pointer;
  }

(Which takes less time to write once in the stylesheet than writing href='#' on every link)

Having href='#' also has the annoying inconvenience of causing the browser to jump to the top of the page if for some reason the handler hasn't had a chance to attach itself to the element (mouse trigger happy user, the impatient type, ...)

My question, is there a particular good reason to keep using the href='#' ?

Would removing it break some browser behaviour in a few particular contexts?

EDIT: I'm getting some really random answer for this question, maybe I should clarify.

The question is: if I set the hand cursor (and underline and color - thanks Borealid) via css, can I get rid of the href attribute altogether

This question is NOT about what the best href is or how one should attach event handlers

For what it's worth, I'd say if clicking the thing doesn't navigate you anywhere, it shouldn't be an `` at all. Similar to http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0 and http://stackoverflow.com/questions/245868/what-is-the-difference-between-the-different-methods-of-putting-javascript-code — Chris Nash, Feb 02 '12 at 03:56
@Chris.. thanks for the link, I did a search for these but didn't find these ones.. — Ben, Feb 02 '12 at 03:58

score 2 · Answer 1 · answered Feb 02 '12 at 03:50

2

Optimally you would would link to the page that sould be used if the user has Javascript disabled or wants to open the editing screen in a new tab:

<a href="/edit-profile/" class="edit-profile-link">Edit Profile</a>

That way, if anything goes wrong, no functionality is lost.

Of course, building an AJAX editing screen and a standard editing screen is more work. If you don't want to do all of that and you don't care about Javascript free users you can use this:

<a href="javascript:;" class="edit-profile-link">Edit Profile</a>

answered Feb 02 '12 at 03:50

Alec Gorge

17,110
10
59
71

Thanks for the first suggestion. For the second, href="javascript:;" seems more annoying to write than href='#' or no href at all :) – Ben Feb 02 '12 at 03:53
@Ben The difference is inconsequential in the scope of an entire website. The difference is less than a second. – Alec Gorge Feb 02 '12 at 03:55

score 2 · Accepted Answer · answered Feb 02 '12 at 03:54

2

in general I don't use a tags for js calls, its sloppy and gives the response you're talking about. If I am doing an anchor totally use it, but if you're not just use a class as your selector and do the rest in css.

answered Feb 02 '12 at 03:54

Drew Dahlman

4,952
1
22
34

Borealid · Answer 3 · 2012-02-02T03:58:52.457

0

Using the CSS is better. No, removing the # won't break browser behavior. However, the CSS you've got isn't quite adequate: you'd also have to change the text color and underline style, plus implement hover handling and, optionally, differentiating followed links.

edited Feb 02 '12 at 03:58

answered Feb 02 '12 at 03:49

Borealid

95,191
9
106
122

Comments purged, no need to get all picky and such. Please stay on topic and constructive. – BoltClock Feb 02 '12 at 08:51

score 0 · Answer 4 · edited May 23 '17 at 12:11

0

Setting href="#" in this case is basically wanting to stop the event from it's default behavior. I have actually answered a similar question to this here.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 02 '12 at 04:36

sinemetu1

1,726
1
13
24

It's kind of funny that the question even mentioned that the click reset the page horizontal position and is effectivley like an anchor to the top of the page? – Micromega Feb 02 '12 at 04:52
From your link: Sometimes I don't like the # solution, which messes up the scrollbar - the scrollbar will always go to the top after you click it. So this link still is considered as triggering an action. – Grace Shao 9 hours ago – Micromega Feb 02 '12 at 05:10

score 0 · Answer 5 · answered Feb 02 '12 at 06:21

From a purist perspective I would argue that you are breaking the web by not including the href attribute. If a browser does not support javascript your link will not work for them. That's a purists perspective -- simply pointing an href to "#" doesn't make a difference either way.

In the past you only utilized an anchor without an href to specify a place holder on the page, but it looks like utilizing an anchor tag without an href is being deemed obsolete in HTML5:

http://www.html-5.com/changes/deprecated/a-name-tag.html

So the purist perspective is you break the web.

The realist perspective is if you have to reincorporate some behavior the browser gives you for free in CSS because of your HTML -- that would mean the browser is not happy with something in your HTML. And given that anchors without href's are being deprecated. Common sense tells me to keep using href="#" to avoid a face palm moment when you deal with a weird browser based bug that boils up due to this minor violation of the DOM.

Is there any particular good reason to keep using href='#' on javascript targeted links?

5 Answers5

Linked