The following are two methods that make it possible to run JavaScript through a href link attribute:
<!--- method 1 -->
<a href="#" onclick="js_function(123);">Run JavaScript Code</a>
<!--- method 2 (version 1) -->
<a href="javascript:void(0);" onclick="jsFunction('123');">Run JavaScript Code</a>
<!--- method 2 (version 2) -->
<a href="javascript:;"onclick="jsFunction('123');">Run JavaScript Code</a>The suggested method should be javascript:void(0) either version 1 or 2.
-----
Using faux-links method. The example below with jQuery:
$(function()
{
$('.no-link').click(function(e)
{
// ....
e.preventDefault();
});
});
<a href="/" class="no-link">Click Faux-Link</a>
Using the above (simple) solution can be considered bad practice. Here's why:
Just don't have a href attribute at all! Any good CSS reset would take care of the missing default cursor style, so that is a non-issue. Then attach your JavaScript functionality using graceful and unobtrusive best practices - which are more maintainable as your JavaScript logic stays in JavaScript, instead of in your markup - which is essential when you start developing large scale JavaScript applications that require your logic to be split up into black-boxed components and templates. More on this in Large-scale JavaScript Application Architecture
// Cancel click event
$('.cancel-action').click(function ()
{
alert('Cancel action occurs!');
});
// Hover shim for Internet Explorer 6 and Internet Explorer 7
$(document.body).on('hover', 'a', function ()
{
$(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>href attribute on the a element will cause the element to not be accessible using tab key navigation. If you wish for those elements to be accessible via the tab key, you can set the tabindex attribute, or use button elements instead. You can easily style button elements to look like normal links as mentioned in Tracker1's answer.href attribute on the a element will cause Internet Explorer 6 and Internet Explorer 7 to not take on the a:hover styling, which is why we have added a simple JavaScript shim to accomplish this via a.hover instead. This is perfectly okay as if you don't have a href attribute and no graceful degradation then your link won't work anyway - and you'll have bigger issues to worry about.a element with a href the attribute that goes to some URL that will perform the action manually instead of via an Ajax request or whatever should be the way to go. If you are doing this, then you want to ensure you do an event.preventDefault() on your click call to make sure when the button is clicked it does not follow the link. This option is called graceful degradation.Encouraging the use of # requires the function to have return false value of the function called as:
function js_function()
{
// ...
return false;
}with the included return js_function() within the a href attribute as such:
<a href="#" onclick="return js_function(123);">Run JavaScript Code</a>Both the return or the return false will most likely be forgotten in development.
Another reason for avoiding # is that the final return false; will not execute if the called function throws an error.
----
Keep in mind that there are cases where the onclick event property is assigned dynamically. It's preferred 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)"Using javascript:void(0) avoids all of the above headaches without any downsides.
Using href="#", makes sure onclick always contains return false; at the end, that any called function does not throw an error and if attached to a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.
----
The following additional method can be used to avoid a return from processing:
<a href="#" onclick="js_function(); return false;">Run JavaScript Code</a>
----
Using the hash (#) can have some positive results because in JavaScript it is a pseudoscheme: