HTML / jQuery: How to properly call a function on an anchor tag (cross-browser)

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>