Is it better to put the action in the href or in an onclick event?

Question

From usability point of view:
In most of website we can see a link which do an action such as "Delete" link which deletes a record for example, "Add Comment", "Vote Up", ....

Is it better to put the javascript action in the href attribute of the anchor html tag:

<a href="javascript:RemoveMe(132);"> Remove</a>

Or do it in an event:

<a href="#" onlcick="RemoveMe(132)"> Remove</a>

The different between these 2 ways, is how the user will see the link in his browser status bar.
In the fist way the user will see in the status bar: javascript:RemoveMe(132);

But in the second way the user will see in the status bar: www.example.com/pagesample/#

Which is better from usability point of view? which is the common to use?

Answer 1

It’s better to put remove link to the href and javascript handler in the onclick.

<a href="/123/remove/" onclick="RemoveMe(132); return false">Remove</a>

This way users without javascript will still be able to use your app (but with a redirect to another page), and those who have javascript enabled will use javascript version. Both of them will see a meaningful link in the status bar.

If the action is meaningful only in this page only (show/hide smth, load more data, for example), than you should not use <a> tag here. Use styled <span> with dotted underline, for example.

In both cases, it’s also a good thing to write a title attribute to your link that explains what will happen (it will be shown in tooltip), for users who don’t use status bars.

Answer 2

The best option in this case is neither: use a <button> tag instead (with an onclick handler) as this is better for semantics and accessibility.

Answer 3

From a pure usability POV, this is irrelevant. What's more important is how you're visually indicating clickable items.

From a code management POV, it's best to apply the onclick events dynamically after the DOM loads rather than sticking everything inline (this is how jQuery works, for example).

From an accessibility standpoint, things get more complicated. With JavaScript heavy interfaces, study up on the ARIA attributes and techniques.

Answer 4

It's better to add it dynamically. So if the user has javascript disabled he doesn't get useless buttons/links.

But if it comes down to it, the second. www.example.com/pagesample/# is not better from a usability standpoint at all. How is (potentially) moving the users screen to the top better? It doesn't say anything the user might understand either.

Answer 5

Event, definitely. Remember, that links can be bookmarked/drag&dropped/opened in another tab and so on. I prefer to make actions as events, and links behind them point to "#" (dummy) or something what can be bookmarked (current page).

Answer 6

Both ways are bad, because they are not true links. But the first way is less worse than the second way. At least, it has something vaguely meaningful and related to the link goal in the href attribute. In addition, it is a little more accessible, because the action is tied to the activation of the link, not to the click of the link.