ansaurus

Question

javascript:void(0) or onclick="return false" for <a> - which is better?

Answer 1

+5 A:

Both are poor choices. Presentation shouldn't mix with content. That means no javascript: URIs, and definitely no onclick attributes.

The way to do it:

<a id="myLink">Something</a>
<script>
    function myFunction(...) { ... }
    document.getElementById('myLink').addEventListener('click', myFunction, false);
</script>

Delan Azabani 2010-08-12 08:00:55

In general, it is a second way - event listener. I have written onclick="..." for simplicity. I use JQuery - so $("#elementId").bind("click", function(){return false;});Thank you.

Amber 2010-08-12 08:08:51

You're right that both are poor choices, but this is even worse: it doesn't work in IE. And how does this putting a `<script>` element in immediately after the `<a>` actually improve things from a separation-of-concerns perspective?

Tim Down 2010-08-12 21:23:37

The `<script>` can very well be anywhere else. Also, the phasing out of Internet Explorer *starts with the developers*. If we continue to babysit the browser, nobody will switch, and it's a perpetual cycle of IE support.

Delan Azabani 2010-08-12 23:21:56

Sigh. I'm not getting deeply into the IE-is-bad-so-I'm-not-going-to-support-it issue again. I'll limit myself to pointing out that it's the user's choice which browser they use, not yours, and most users neither know nor care which browser they use. Some simply cannot switch. This case isn't even controversial: `addEventListener` doesn't even work in the current version of IE (8), meaning your code doesn't work in something like 50% of people's browsers. Do you really want to exclude 50% of people from using your website?

Tim Down 2010-08-13 15:34:45

If it's a "boring" "company" website aimed at the public, I'll add a workaround (but no more than `attachEvent = addEventListener`). If it uses heavy HTML 5 and JavaScript, targeted at devs or other 'smart' people, I won't support IE at all.

Delan Azabani 2010-08-14 01:13:47

OK, that's your choice. However, it's fair to assume that the person asking the original question will be concerned about IE.

Tim Down 2010-08-14 16:30:42

Answer 2

A:

Neither. If your link doesn't go anywhere, don't use an <a> element. Use a <span> or something else appropriate and add CSS to style it as you wish.

Tim Down 2010-08-12 19:41:33

Actually, an `<a>` element is better as it's more semantically correct. Unless everything is clickable, like a full-blown web app, an `<a>` element will be more likely to be expected as clickable than a `<span>`.

Delan Azabani 2010-08-12 23:24:09

Why is it more semantically correct if it's not acting as a link or an anchor?

Tim Down 2010-08-13 15:35:25

Because a `<span>` isn't semantically *anything*. An `<a>` is a little closer as you click on it, even though it isn't quite a link. However, like I said earlier, if I'm writing a full-blown standalone webapp, chances are these semantic differences are less important and I'll just stick with one or the other; probably `<span>`.

Delan Azabani 2010-08-14 01:16:40

Yes, I understand that `<span>` conveys no semantic meaning. However, since the question is asking about an `<a>` element with `onclick="return false;"`, I assumed the OP wanted the link to do precisely nothing, making it entirely pointless as a link. Re-reading the question, I think I misunderstood.

Tim Down 2010-08-14 16:14:48

ansaurus

tags:

views:

answers:

javascript:void(0) or onclick="return false" for <a> - which is better?

related questions