CODEWITHSUNDEEP
javascriptcross-browser
Moshe
Moshe

Reputation: 58097

Javascript OnClick cross-browser friendly?

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?

Upvotes: 6

Views: 8032

Answers (6)

Adam
Adam

Reputation: 44949

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.

Upvotes: 0

Quentin
Quentin

Reputation: 944139

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

Upvotes: 9

Daniel Vandersluis
Daniel Vandersluis

Reputation: 94253

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

Upvotes: 6

rfunduk
rfunduk

Reputation: 30442

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.

Upvotes: 2

ChrisF
ChrisF

Reputation: 137178

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.

Upvotes: 0

Michael Robinson
Michael Robinson

Reputation: 29498

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>

Upvotes: 0

Related Questions