Executing JavaScript when a link is clicked

Question

Which is preferable, assuming we don't care about people who don't have JavaScript enabled?

<a href="#" onclick="executeSomething(); return false"></a>

Or

<a href="javascript:executeSomething()"></a>

Is there any difference?

Or there any other ways I'm missing besides attaching an event to the anchor element with a JavaScript library?

Answer 1

The nice thing about onclick is you can have the link gracefully handle browsers with javascript disabled.

For example, the photo link below will work whether or not javascript is enabled in the browser:

<a href="http://www.example.com/myPhoto.jpg" target="_blank" onclick="showPhoto(this.href); return false;">foobar</a>

Answer 2

This is essentially the pattern you'd want to follow:

• Write your HTML markup
• Attach event handlers from JavaScript

This is one way:

<a id="link1" href="#">Something</a>

<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");

// attach event
link1.onclick = function(e) { return myHandler(e); };

// your handler
function myHandler(e) {
    // do whatever

    // prevent execution of the a href
    return false;
}
</script>

Others have mentioned jQuery, which is much more robust and cross-browser compatible.

Answer 3

it's better to use the onclick because that's the way the things should be.

The javascript: was somekind of hackish way to simulate the onclick.

Also I advice you to do some non intrusive Javascript as much as possible, it make the code more easy to read and more maintainable!

Answer 4

href="#" has a number of bad side effects such as showing # in the browser footer as the destination URL, and if the user has javascript disabled it will add a # at the end of their URL when they click the link.

The best method IMHO is to attach the handler to the link in your code, and not in the HTML.

var e = document.getElementById("#myLink");
e.onclick = executeSomething;

Answer 5

Best practice would be to completely separate your javascript from your mark up. Here's an example using jQuery.

 <script type="text/javascript">
     $(function() {
         $('a#someLink').click( function() {
              doSomething();
              return false;
         });
     });
 </script>

 ...

 <a href="#" id="someLink">some text</a>

Answer 6

Yes I would agree to use onclick and leave the href completely out of the anchor tag... Don't know which you prefer to do but I like to keep the 'return false' statement inside by function as well.

Answer 7

The main difference is that:

1. The browser assume by default the href attribute is a string (target url)
2. The browser knows that in a onclick attribute this is some javascript

That's why some guys specify to the browser "hey, interpret javascript when you read the href attribute for this hyperlink" by doing <a href="javascript: ... ;">...</a>

To answer the question, that's the difference!

OTOH what's the best practice when using javascript events is another story, but most of the points have been made by others here!

Thanks