CODEWITHSUNDEEP
javascript
JamesBrownIsDead
JamesBrownIsDead

Reputation: 123

Executing JavaScript when a link is clicked

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?

Upvotes: 7

Views: 17664

Answers (7)

Jeff Meatball Yang
Jeff Meatball Yang

Reputation: 39017

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.

Upvotes: 5

Mike Gleason jr Couturier
Mike Gleason jr Couturier

Reputation: 9136

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

Upvotes: 0

AmbrosiaDevelopments
AmbrosiaDevelopments

Reputation: 2592

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.

Upvotes: 0

Rob
Rob

Reputation: 8187

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>

Upvotes: 9

tvanfosson
tvanfosson

Reputation: 532435

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>

Upvotes: 1

joshperry
joshperry

Reputation: 42227

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;

Upvotes: 4

RageZ
RageZ

Reputation: 27313

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!

Upvotes: 4

Related Questions