What is the right way to change the behavior of an <a> tag?

Question

I want to make a link call a Javascript function through the onclick event and not do anything else (follow the link). What is the best way to do that? I usually do this:

<a href="#" onclick="foo()">Click</a>

But I'm not sure that is the best way and in this case it is navigating to page.html# which isn't good for what I'm doing.

Answer 1

Usually, you should always have a fall back link to make sure that clients with JavaScript disabled still has some functionality. This concept is called unobtrusive JavaScript. Example... Let's say you have the following search link:

<a href="search.php" id="searchLink">Search</a>

You can always do the following:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

That way, people with javascript disabled are directed to search.php while your viewers with JavaScript view your enhanced functionality.

Edit: As nickf pointed out in comment #2, a try and catch will prevent the link to follow if there is an error in your handler.