Javascript OnClick cross-browser friendly?

Question

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?

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

It works well actually... One thing I would add is a "return false" which stops the event from propagating:

<a href="#" onclick="doSomething();return false;">Click here.</a>

Otherwise, the browser URL will be updated with a hash mark (#) at the end.

With that said, many would argue you should separate JavaScript code from HTML. When the page loads, you can attach events to DOM objects. If you go this route, I highly recommend using a framework such as jQuery.

Answer 7

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.

1. It is not unobtrusive. Event handlers are better applied with JS.
2. It links to the top of the page (#) and will always send the browser there, even if the JS runs.
3. 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