What is the best practise for a link that trigger javascript

Let's say I have a label that triggers some javascript. For example:

HTML:

<开发者_运维问答;a href="#" id="some_id">Trigger action!</a>
<!-- or, with appripriate CSS : -->
<span id="some_other_id">Trigger action!</span>

jQuery:

$("#some_id").click(function() {
   alert("some action") 
});

How do i best achieve that ?

My question is what should I see in at the bottom left of the browser when I hover on the link ? ie, what the href value should be ?

If the response is 'none', then the right method is with a span.

Example of few methods : http://jsfiddle.net/M3qkU/5/

---

It depends on whether you're doing a web page or a web application.

If you're doing a web page, try to have the link do something useful for people who don't have JavaScript enabled. That way, the JavaScript is enhancing the page rather than required for it to work at all. This is called progressive enhancement. For example: Suppose you have a page and you want it to have tabs. Put the tabs in elements in order, and give each tab's element an id value. The navigation links that take you to those tabs would have that id value in their fragment (e.g., #movies takes you to the movies element — the browser does this for you). Then when your JavaScript loads, have it turn those elements into tabs and take over the action of those links.

If you're doing a web application, and the link triggers a "page change" or "tab change" sort of change in the UI, keep it as a link and make the href a fragment (e.g., #movies) that describes the "page" or "tab" that the application switches to when it happens. You could even use that information when processing the link, and you can use it when loading the page initially so your various page states become linkable. If the "link" doesn't cause a location-style change in the application, most of the time make it a button instead (you can style button elements to a very significant degree, though I wouldn't make them look like links).

---

Two cases:

• if you have a fallback that works with javascript off (e.g. a login form that opens in an overlay can also be opened as a regular page), then use a <a> link which points to that page, with an onclick that triggers the overlay/javascript action.

• if it's an element that has no fallback, don't use a <a> (e.g. something that triggers an inline editor)

But whatever you do, don't use <a href="javascript:soemthing()"> because the user sees that as "url" of the link and it can be confusing.

---

As for <a href="#">, I don't recommend it either (even if it's widely used) because like mentionned earlier, it doesn't point to a real location.

The only benefit of using a <a> in such cases is that you get a hand cursor, but you can use cursor:pointer in CSS to have that cursor on your non-<a> elements.

---

There's plenty of theories for this. Mine:

• an a tag should only be used when it's linking to content. In such cases, there should be a valid href. In situations where the linked content would be loaded on-page (modal, ajax, etc) then JS would over-ride the href and do its thing.

• page-level interactions (buttons, clickable icons, etc.) should not be links, as without JavaScript, they serve no purpose. In that situation, they should use a different tag than a.

Of course, I break those rules myself all the time.

Technically, href="#" will cause the page to scroll to the top in most browsers. If you use this, then you have to be careful to always over-ride the href in your JS...which is easy to forget. As such, for pure javascript interaction a tags, I suggest using href="javascript:;"