Ideal value for <a href="?"> when used for a JS event?

Question

I've got a link I want to appear on my page,

 <a>add another</a>

But it doesn't look like a link unless I add an href attribute. I'm going to be using jquery to add a .click() event to it, so it doesn't really need anything else.

What's the best value to href to? #? javascript:void(0)? My concern is if someone clicks it before the .click() event gets added or something. # will scroll them to the top of the page, void(0) looks kinda nasty and isn't informative if they look at the address bar...

Answer 1

<a href="#">...</a> and make sure you use your javascript unobtrusively to return false when it's clicked and you haven't set a link for it yet.

Answer 2

The ideal href attribute would be to link to a URL that will perform the same action for visitors that don't have JavaScript enabled. If that's unnecessary, I typically use href="#" and I haven't had any issues with that.

Answer 3

If you're concerned about jumping to the top of the page with a single #, try giving the anchor a name attribute and use #anchor-name.

Answer 4

The octothorpe (#) = is a sloppy way to link to the 'top of the page' and really has no use anymore. Using it can lead to usability and accessibility problems.

If your link doesn't actually behave like an HTML link, then it shouldn't be an HTML link.

If it is a link, then it should have a valid URI in the href attribute.

If you absolutely must have a null href, then you should use just that: href="javascript:;"

Answer 5

My suggestion is to have the link take them to an action that would "do the right thing" if javascript were turned off completely. By that I mean that it should result in the same effect as the client-side actions, if at all possible, or some set of steps that would result in the same effect. If this isn't possible or desirable, then you shouldn't display the link until the handler has been applied. That is, initially have it "display: none; then do a show() after the event handler has been applied.

<a href="/something/add" class="add-item javascript-only">Add Another</a>

<script type="text/javascript">
   $(function() {
       $('.add-item').click( function() {
           ...
           return false; // important!
       });
       $('.javascript-only').show();
  });
</script>

Answer 6

I usually do this...

<a href="JavascriptDisabled.htm">Foo</a>

And then when you handle the click event, make sure to cancel it (by returning false or calling preventDefault).

The JavascriptDisabled.htm page just has a friendly message on it like "You must have Javascript enabled to use this feature".

Answer 7

Another possibility would be to use a <span> element instead of <a> and use :hover to style it link a link (change color, underline, show a hand cursor, or whatever you like). This works nicely if you are already styling other links in your site. If you are allowing links to appear as the browser/user specify, then this fake link will probably look different than tha real links in the site.

HTML:

<span class="add-link" onclick="...">add another</span>

CSS:

.add-link:hover {
  text-decoration:underline;
  color: blue;
  cursor:pointer;
}