Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
I'd like to know how many people look at the status bar for buttons (or anchors that masquerade as buttons). I know for typical hyperlink anchors, I always look at the status bar to make sure I'm not being tricked into clicking into a virus/porn site. I can't say I've ever looked at the status bar for buttons. –  JoJo Mar 6 '11 at 1:44
    
I am talking at links, anchor tags –  Amr ElGarhy Mar 6 '11 at 2:23
2  
Your anchor tags are mimicking the semantic function of buttons. You're using anchors to execute javascript, not go to a new page. Supposedly, you'll also style your "anchor-buttons" to look like buttons, because that's what they are. To the end user, they don't care about your implementation. They only care about what they see. At the end of the day, we will have to ask what is the general behavior when dealing with buttons (or anchors masquerading as buttons). –  JoJo Mar 6 '11 at 6:31
    
You shouldn't be putting JavaScript inline at all. Keep it out of HTML, it doesn't belong there. –  zzzzBov Feb 4 '13 at 3:15

6 Answers 6

up vote 12 down vote accepted

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.

share|improve this answer
2  
onlcick? onlick? :p –  ThiefMaster Apr 18 '12 at 18:43
    
Well done from a technical and UX POV –  Itumac Feb 3 '13 at 4:16
1  
I have to disagree. HTML belongs in .html files, CSS belongs in .css files, JavaScript belongs in JS files. You should not be adding inline event handlers at all, instead bind events from a JavaScript file, and leave the [href] as an actionable link. –  zzzzBov Feb 4 '13 at 3:15

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.

share|improve this answer

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.

share|improve this answer
    
Buttons are very hard to deal with. I would recommend anchors in most cases, even though it's semantically incorrect. Buttons have extra padding in Firefox, even with a CSS reset (stackoverflow.com/questions/5122192/…). Buttons appear wider in Internet Explorer 6 and 7. IE6 is missing certain CSS properties. –  JoJo Mar 6 '11 at 1:42

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.

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.