Can I use the following across all browsers?
<a href="#" onclick="doSomething()">Click here.</a>
Is this "bad practice" in regards to standards?
Will it work on IE, FF, Safari and Chrome?
Add a comment
|
6 Answers
Can I use the following across all browsers?
Yes
Is this "bad practice" in regards to standards?
"Bad practice" and "Standards compliance" are different things. It is standards compliant, but also, for three reasons, bad practice.
- It is not unobtrusive. Event handlers are better applied with JS.
- It links to the top of the page (
#) and will always send the browser there, even if the JS runs. - If the JS fails, then nothing useful will happen. You should build on stuff that works.
Will it work on IE, FF, Safari and Chrome?
Yes
4 Comments
Tim Down
The fact that using an event handler attribute is not "unobtrusive" has nothing to do with standards. In fact, event handler attributes such as
onclick are standardized in the HTML 4 spec.
Quentin
"bad practice" and "standards" are different things. I'll clarify the answer.
Quentin
@czupe — The
click() method has absolutely nothing to do with the question or this answer (which are about assigning event handers, not triggering them programatically).
czupe
You are perfect true Sir. I was accidently missread this question and answers due to bad search term. Thanks!
Despite some people might say, it's not bad practice (with the caveat that it's the only event listener you want on this element), and it is the simplest (and most prevalent) cross-browser way to add an event listener, but there are two changes I would make to it.
First of all, if Javascript is not enabled, the link will be useless (although the # href will make the browser scroll to the top of the page, which probably isn't desired). Similarly, with Javascript enabled, clicking on the link will still cause the browser to follow the href, and scroll up.
Instead, I'd use something like this:
<a href="[url to JS-less way of doing the same thing]" onclick="doSomething(); return false">Click here</a>
Alternately, if it really is a javascript-only thing, you could make the link hidden by default using CSS and use Javascript to make it visible (so that users with JS disabled won't see a useless link).
answered Aug 19, 2010 at 21:44
Daniel Vandersluis
94.7k23 gold badges174 silver badges158 bronze badges
1 Comment
Jon Hanna
Yep, this is totally the way to go. To add on the question of cross-browser, onclick was available on '<a>' elements with hrefs (but not those with only names) from the time NS2 was the first browser with Javascript.
onclick is cross-browser. The discussion about standards and best-practices is much larger, of course. Most would say that 'progressive enhancement' is preferred. The simple explanation of this is that the link would still do the right thing, the javascript version would only improve the behavior. Whether or not this is important to you really depends on what you're doing, what the project is, etc.
Comments
It should work in the browsers you mentioned.
Try to get into the habit of putting a ; at the end of each Javascript 'line':
<a href="#" onclick="doSomething();">Click here.</a>
Although it's going to run fine without it, if you make that good habit then you can save yourself trouble later when you write larger scripts.
If you don't want the # to be displayed in the location bar:
<a href="#" onclick="doSomething(); return false;">Click here.</a>
answered Aug 19, 2010 at 21:43
Michael Robinson
29.6k12 gold badges109 silver badges131 bronze badges
1 Comment
Moshe
I know JS, I am just a bit rusty. Thanks for the pointer though.
From this Wikipedia page onClick is listed in the Common/W3C events section and is supported by the browsers you mention.
As an aside if it wasn't then most web applications wouldn't work on these browsers.
Comments
It will work on all browsers, but as a best practice most attach with click handlers like jQuery's $('a').click(doSomething); which makes the JavaScript more independent from the HTML. Also that way multiple handlers can be attached and with jQuery's live method handlers can be added to HTML elements that are dynamically added to the page.
