Href attribute best practices for using "#", "javascript:void(0)", "javascript:" - HTML - HTML5 - JS

Problem definition

There are number of ways you can use onclick and href to your anchor tag for on page clicking,

<a href="#" onclick="func()">click here</a>

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

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

<a href="javascript:" onclick=""></a>

<a onclick="func()">Does not appear as a link, because there's no href</a>

Which one is better or what are the differences?

Solution

 It's a trick to do the same as PreventDefault

when you're way down in the page and an anchor as:

<a href="#" onclick="func()">click here</a>
you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

regarding your problem defination

<a onclick="func()">Does not appear as a link, because there's no href</a>
just do a {text:decoration:underline;} and you will have "link a-like"

<a href="javascript:void(0)" onclick="func()">fn is called</a>
<a href="javascript:" onclick="func()">fn is called too!</a>

it's ok, but in your function at the end, just return false; to prevent the default behaviour, you don't need to do anything more.


Disadvantages of "#" over "javascript:void(0)", "javascript:"

Encouraging the use of # amongst a team of developers inevitably leads to some using the return value of the function called like this:

function doSomething() {
    //Some code
    return false;
}
But then they forget to use return doSomething() in the onclick and just use doSomething().

A second reason for avoiding # is that the final return false; will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.

A third reason is that there are cases where the onclick event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick (or on anything) in HTML markup look like this:

onclick="someFunc.call(this)"

OR

onclick="someFunc.apply(this, arguments)"


Which code is better "#", "javascript:void(0)"

Doing <a href="#" onclick="myJsFunc();">Link</a> or <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> or whatever else that contains an onclick attribute - was okay back five years ago, though now it can be a bad practice. Here's why:

• It promotes the practice of obtrusive JavaScript - which has turned out to be difficult to maintain and difficult to scale. More on this in Unobtrusive JavaScript.
• You're spending your time writing incredibly overly verbose code - which has very little (if any) benefit to your codebase.
• There are now better, easier, and more maintainable and scalable ways of accomplishing the desired result.

Example

Your HTML:

<a class="cancel-action">Cancel this action</a>

Your CSS:

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

Your JavaScript(using jQuery):

// Cancel click event
$('.cancel-action').click(function(){

});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

Tags and Related Topics
Alternatives for using “#” in href attribute,
Why use javascript:void(0) instead of # in href,

References
We get details from http://www.stackoverflow.com/,Authors:
http://stackoverflow.com/users/28004/balexandre, http://stackoverflow.com/users/17516
http://stackoverflow.com/users/130638