Why would you do this when you can use addEventListener/attachEvent? If there is no href-equivalent, don't use an <a>, use a <button> and style it accordingly.
eyelidlessness
2008-10-29 05:24:44
views:
1348answers:
6
+4
A:
using a button instead of a link isn't a feasible option in many cases.
nickf
2008-10-29 05:26:20
Because it looks ugly. You can add an icon beside the link. They are hard to format the same across browsers. And generally, people are moving to links instead of buttons--look at most of stack over flow.
Darryl Hein
2008-10-29 05:44:33
It looks ugly? It looks like whatever you want it to look like. In fact, I think buttons actually have more style flexibility than links, in that they're inline but can properly take padding across browsers. Anything that can be done with a link can be done with a button, with regards to CSS.
eyelidlessness
2008-10-29 07:11:36
why button? Why not use a span. The css will be simpler (shorter) than with buttons.
Gene
2008-10-29 07:46:58
Span can't be keyboard-focused.
bobince
2008-10-29 09:41:07
And button is (gasp) semantically correct. Span is semantically meaningless. A button is *exactly* what the author intends to use, semantically.
eyelidlessness
2008-10-29 17:09:36
+1 agreed ++++++++++
alex
2009-01-06 00:40:52
+2
A:
you forgot another method:
5: <a href="#" id="myLink">Link</a>
with the javascript:
document.getElementById('myLink').onclick = function() {
// do stuff
};
I can't comment on which of the options has the best support or which is semantically the best, but I'll just say that I much prefer this style because it separates your content from your JS. It keeps all the Javascript together, which is much easier to maintain (especially if you are applying this to many links), and you can even put it in an external file which can then be packed to reduce filesize and cached by client browsers.
nickf
2008-10-29 05:25:20
If you have 20 or 30 different links with JS this can get quite tedious and end up with a lot of JS.
Darryl Hein
2008-10-29 05:45:16
it's no more tedious than wading through HTML to change javascript. ...or you could use something like jQuery which can easily change the events on multiple elements at once... $('#menu a').click(function() { .. })
nickf
2008-10-30 00:24:18
+2
A:
<a href="#" onClick="DoSomething(); return false;">link</a>
I will do this, or:
<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() { DoSomething(); return false; };
Depending on the situation. For larger apps, the second one is best because then it consolidates your event code.
nlaq
2008-10-29 05:25:29
If you have 20 or 30 different links with JS this can get quite tedious and end up with a lot of JS.
Darryl Hein
2008-10-29 05:46:06
and bugs which creep into your code can be VERY hard to debug. These bugs appear very easily, as evidenced by your first example. :)
nickf
2008-10-29 07:22:53
+14
A:
I quite enjoy Matt Kruse's Javascript Best Practices article. In it, he states that using the href section to execute javascript is a bad idea. Even though you have stated that your users must have javascript enabled, there's no reason you can't have a simple HTML page that all your javascript links can point to for their href section in the event that someone happens to turn off javascript after logging in. I would highly encourage you to still allow this fallback mechanism. Something like this will adhere to "best practices" and accomplish your goal:
<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
cowgod
2008-10-29 05:35:58
as the href value will be shown to user in the status bar? (the bar at the bottom) I would consider using a bit more user friendly link eg. "js.html?doSomething" the page can still be static html. This way the user will clearly see a difference between links.
Gene
2008-10-29 07:51:05
You can override this value with the title attribute, e.g. <a href="javascript_required.html" title="Does Something" onclick="doSomething(); return false;">go</a>
Conspicuous Compiler
2010-01-25 13:56:50
A:
Method #2 has a syntax error in FF3 and IE7. I prefer methods #1 and #3, because #4 dirty the URI with '#' although causes less typing... Obviously, as noted by other responses, the best solution is separate html from event handling.
Pier Luigi
2008-10-29 07:19:58
Method #2 of what? The questions don't stay in the same order as when YOU saw them.
Diodeus
2008-10-29 12:43:17
Method #4 *won't* mess up the URI if you make sure to `return false`.For that reason method #4 is probably best (of those listed).
Már Örlygsson
2008-10-29 14:24:39
A:
What Not To Do
<a href="javascript:doSomething()">link</a>
<a href="#" onClick="doSomething()">link</a>
<a href="#" onClick="javascript:doSomething();">link</a>
<a href="#" onClick="javascript:doSomething(); return false;">link</a>
drorhan
2010-01-25 13:29:30