Good way to keep an anchor tag without default url

Question

In our page we have a slew of anchor tags to which we dynamically attach click handlers. In such a case what is the best way to keep an anchor tag in the mark up?

Currently we have

<a href="javascript:void(0);" >....</a>

We need void value for href as some of them may not get attached with click handlers.

The absolute _best_ thing to put in the href attribute would obviously be a URL which performs the same action the JS event handler does. Edit: If that's impossible then use #. — powerbuoy, Jan 05 '12 at 06:16
Well you'd have to prevent the default behaviour of the link either by returning false from the event handler or using the `preventDefault()` method of the event object. — powerbuoy, Jan 05 '12 at 18:03

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

Returning false from a jQuery event handler will prevent the default behavior (and bubbling) for you. There's no need to mess with the href attribute (though that won't hurt).

$(document).on("click", "a.yourSelector", function(){
    //your code

    return false;
});

Or of course jQuery pre 1.7

$(document).delegate("a.yourSelector", "click", function(){
    //your code

    return false;
});

For more information on cancelling dom events, see this question (and answer) and this link

edited May 23 '17 at 12:21

Community

1
1

answered Jan 05 '12 at 05:57

Adam Rackis

82,527
56
270
393

http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – Rusty Fausak Jan 05 '12 at 06:31

score 1 · Accepted Answer · answered Jan 05 '12 at 06:13

1

Ommit the href-attribute and when assigning the onclick also set the cursor-style of the elements to "pointer" , otherwise users with JS disabled will be confused when clicking on the elements and nothing happens.

answered Jan 05 '12 at 06:13

Dr.Molle

116,463
16
195
201

Comparing an anchor with href and without href, is the cursor:pointer style the only difference? Ommiting href came to my mind, was not sure how it would behave in different browsers. – ChrisOdney Jan 05 '12 at 15:21
I don't see any difference in that special case, you only use the href-attribute to have the special cursor, this can be done using CSS(in fact you don't need to use a ``-element, it can be any element) – Dr.Molle Jan 05 '12 at 22:15

score 0 · Answer 3 · answered Jan 05 '12 at 06:14

The simpler code would be like this:

<a href='#' class='do-stuff'>Link</a>

The "#" sign keeps the html code clean, and readable

jQuery(document).ready(function() {

  jQuery(".do-stuff").click(function() {
    alert("clicked"); 
    return false; // disables default link action
  });

});

Good way to keep an anchor tag without default url

3 Answers3