HTML / jQuery：如何正确调用锚标记上的函数（跨浏览器）

Question

I have a page with a few links (anchor tags) that are used to call a function.

Everything is working as intended but I wonder what is the proper way here to avoid issues with this cross-browser as I've seen different approaches on Google.

I use jQuery to call the function instead of inline javascript as this way all my functions are called the same way + I want to call the same function from different elements by using a class.

Can someone tell me if the following is the correct approach here to avoid issues cross-browser (IE8, IE9, FF, Chrome) ?

Also, do I have to add one of the following or something similar here to my function ?

return false;

OR

e.preventDefault();

My HTML:

<a href="javascript:void(0)" class="deco-min showSiteMap">Site Map</a>

My jQuery:

$('.showSiteMap').on('click', function() {
    showSiteMap();
});

Answer 1

Since you are using jQuery, the cross browser concers are handled by the library itself so you don't have to worry about it. So either of the approaches will work fine.

The first approach will prevent the default action along with stopping event propagation.., use it only of that is what you want.

For the second approach to work, you need to accept the event parameter in the click handler like

$('.showSiteMap').on('click', function(e) {
    showSiteMap();
    e.preventDefault();
});

In both the approaches there is no need to have the href attribute like that, you can just use

<a href="#" class="deco-min showSiteMap">Site Map</a>

Answer 2

For links that aren't really links, what you put in the href is largely a matter of style. I like to give them hash fragments that suggest what they're going to do ( href="#sitemap" ), because users do sometimes look at the status area for a link to see what it's going to do.* But you can use href="#" , href="javascript:void(0)" , href="javascript:;" , whatever.

In your jQuery handler for the link, if you use a hash fragment, you may need to prevent the link's default action (following the link) if you don't want the hash to be added to the URL (and the page potentially scrolled to an element with the matching id , if any). You can do that with e.preventDefault() , or by using return false; . return false; does two things: e.preventDefault(); and e.stopPropagation(); (preventing the event from bubbling to ancestor elements of the link). So use whichever makes sense for your application.

So:

$('.showSiteMap').on('click', function() {
    showSiteMap();
    return false;
});

...if you want to prevent the default and stop propagation.

Or:

$('.showSiteMap').on('click', function(e) {
    e.preventDefault();
    showSiteMap();
});

...if you just want to prevent the default (following the link) but not stop propagation.

If your href is either of the javascript: examples above, you don't have to prevent the default, because the default is a no-op.

---

* But I typically use the hash fragment. Instead of handling a click on the link, I handle hash changes on the URL, and have the page change state to match the hash. This makes for a bookmarkable app. (I don't use links for actions, that's what buttons are for.)