Href attribute for JavaScript links: “#” or “javascript:void(0)”?

You could use the href and remove all links that have only hashes:

HTML:

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

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});

It's nice to have your site be accessible by users with JavaScript disabled, in which case the href points to a page that performs the same action as the JavaScript being executed. Otherwise I use "#" with a "return false;" to prevent the default action (scroll to top of the page) as others have mentioned.

Googling for "javascript:void(0)" provides a lot of information on this topic. Some of them, like this one mention reasons to NOT use void(0).

If you use a link as a way to just execute some JavaScript code (instead of using a span like D4V360 greatly suggested), just do:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

If you're using a link with onclick for navigation, don't use href="#" as the fallback when JavaScript is off. It's usually very annoying when the user clicks on the link. Instead, provide the same link the onclick handler would provide if possible. If you can't do that, skip the onclick and just use a JavaScript URI in the href.

I choose use javascript:void(0), because use this could prevent right click to open the content menu.

I strongly prefer to keep my JavaScript out of my HTML markup as much as possible. If I'm using <a> as click event handlers then I'd recommend using <a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

It's very important to note that many developers out there believe that using anchor tags for click-event handlers isn't good. They'd prefer you to use a <span> or <div> with some CSS that adds cursor: pointer; to it. This is a matter if much debate.

Just to pick up the point some of the other have mentioned.

It's much better to bind the event 'onload'a or $('document').ready{}; then to put JavaScript directly into the click event.

In the case that JavaScript isn't available, I would use a href to the current URL, and perhaps an anchor to the position of the link. The page is still be usable for the people without JavaScript those who have won't notice any difference.

As I have it to hand, here is some jQuery which might help:

var [functionName] = function() {
};

jQuery("[link id or other selector]").bind("click", [functionName]);

I use href="#" for links that I want a dummy behaviour, then I use this code:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

Meaning if the href equals to a hash (*="#") prevent default link behaviour, thus still allowing you to write functionality for it and it doesn't affect anchor clicks.

Don't lose sight of the fact that your URL may be necessary -- onclick is fired before the reference is followed, so sometimes you will need to process something clientside before navigating off the page.

I believe you are presenting a false dichotomy. These are not the only two options.

I agree with Mr. D4V360 who suggested that, even though you are using the anchor tag, you do not truly have an anchor here. All you have is a special section of a document that should behave slightly different. A tag is far more appropriate.

You should not use inline onclick="something();" in your HTML to not polluate it with meaningless code; all click bindings must be set in Javascript files (*.js).

Set binding like this : $('#myAnchor').click(function(){... **return false**;}); or $('#myAnchor').bind('click', function(){... **return false**;});

Then you have a clean HTML file easy to load (and seo friendly) without thousands of href="javascript:void(0);" and just href="#"

If you are using an <a> element, just use this:

<a href="javascript:myJSFunc();" />myLink</a>

Personally I'd attach an event handler with JavaScript later on instead (using attachEvent or addEventListener or maybe <put your favorite JavaScript framework here > also).

Here is one more option for completeness sake, that prevents the link from doing anything even if JavaScript is disabled, and it's short :)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

If the id is not present on the page, then the link will do nothing.

Generally, I agree with the Aaron Wagner's answer, the JavaScript link should be injected with JavaScript code into the document.

I'd say the best way is to make href anchor to an ID you'd never use like #Do1Not2Use3This4Id5 or a similar Id that you are 100% sure no one will use and won't offend people

1. Javascript:void(0) is a bad idea and violates Content Security Policy on CSP-enabled HTTPS pages https://developer.mozilla.org/en/docs/Security/CSP (thanks to @jakub.g)
2. Using just # will have the user jump back to the top when pressed
3. Won't ruin the page if javascript isn't enabled (unless you have js detecting code
4. If javascript is enabled you can disable the default event
5. You have to use href unless you know how to prevent your browser from selecting some text, (don't know if using 4 will remove the thing that stops the browser from selecting text)

basically no one mentioned 5 in this article which I think is important as your site comes off as unprofessional if it suddenly starts selecting things around the link.

I personally use them in combo e.g.

HTML

<a href="#">Link</a>

with little bit of jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

or

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

but I'm using that just for preventing the page jumping to top when user clicks on empty anchor.

I'm rarely using onClick and other on events directly in HTML

My suggestion would be to use <span> element with the class attribute instead of anchor e.g.

<span class="link">Link</span>

Then assign function to .link with script wrapped in body and just before the </body> tag or in external JS document.

<script>
  (function($) {
    $('.link').click(function() {
       ... code to execute ...
    });
  })(jQuery);
</script>

*Note: For dynamically created elements use

$('.link').on('click', function() {
   ... code to execute ...
});

and for dynamically created elements which are created with dynamically created elements use

$(document).on('click','.link', function() {
   ... code to execute ...
});

then you can style span element to look like anchor with little CSS

.link {
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}
.link:active {
  color: red;
}

Here's a FIDDLE example of above aforementioned.