Ideal value for 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...

score 8 · Answer 1 · answered Aug 10 '10 at 17:15

8

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.

answered Aug 10 '10 at 17:15

Steve Hansell

17,465
1
17
14

1

Very much agreed, +1 for accessibility – Ryan Kinal Aug 10 '10 at 17:17
1

A problem with using # is that if you forget to return false from your onclick handler (or if your users have JavaScript disabled), your scrollbar will move to the top of the page. – Jesse Buchanan Aug 10 '10 at 18:27
That can also change content focus if someone is using some form of screen reader. – DA. Aug 10 '10 at 19:13

score 6 · Answer 2 · answered Aug 10 '10 at 17:18

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>

score 4 · Accepted Answer · answered Aug 10 '10 at 17:22

4

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".

answered Aug 10 '10 at 17:22

Josh Stodola

81,538
47
180
227

Very cool solution. I like it. +1 – Ryan Kinal Aug 10 '10 at 17:26
Nice thinking! I could use this. – Andri Jan 04 '12 at 15:05

score 1 · Answer 4 · answered Aug 10 '10 at 17:18

1

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.

answered Aug 10 '10 at 17:18

Marcus Adams

53,009
9
91
143

score 1 · Answer 5 · answered Aug 10 '10 at 17:18

1

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:;"

answered Aug 10 '10 at 17:18

DA.

39,848
49
150
213

"If your link doesn't actually behave like an HTML link, then it shouldn't be an HTML link. " -- what should it be then? – mpen Aug 10 '10 at 17:26
Please, if you do this (make some not-usually-clickable-element clickable), make it keyboard accessible. I should be able to tab to it, and press enter, and have it behave the same as "clicking". – Jesse Buchanan Aug 10 '10 at 18:34
I don't know, Mark, without more context. It really depends on a lot of variables. – DA. Aug 10 '10 at 19:12
Not really. If it's not a link, then it should almost always be a button (unless it is some other form of input). – Justin Johnson Aug 11 '10 at 00:25
@justin...there are lots of cases where both a link and a button would likely be the wrong element. I'm thinking primarily of interfaces that use a lot of javascript to show/hide elements and the like via triggers. – DA. Aug 11 '10 at 00:57

score 1 · Answer 6 · answered Aug 10 '10 at 17:57

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;
}

score 0 · Answer 7 · answered Aug 10 '10 at 17:15

0

<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.

answered Aug 10 '10 at 17:15

sjobe

2,817
3
24
32

Ideal value for when used for a JS event?

7 Answers7

Linked