onclick - # or javascript:void(0)?

Question

I do not intend to start a debate.

If we want to make use of the onClick event, we should, on a certain way to disable the href to trigger. - Is this correct ?

If the above is correct, I believe that javascript:void(0) has the advantage of NOT triggering the scroll behavior.

Are those assumptions correct?

Note: I do not intend to search for a chimera, but my quest is about finding a way to style buttons in a cross-browser way with no accessibility hit (at all), without hacks and quirks.

Answer 1

If you want to prevent following the link, you should add event.preventDefault() in your click handler (event.returnValue = false; in IE).

It seems that you are just after the look of a link and not its functionality (or purpose). If so, you can use a button with CSS to style it accordingly.

Having real links with href contents # or javascript:void(0) should be avoided.

Further explanation:

Using a link just to have something "clickable" is not good. A link has a distinct syntactical meaning. As you can assign a click event handler to every element, you can use any other element for that.

The syntactically most correct one (imo) would be button as you will still have the possibility to use tab to navigate on them. You can style them with CSS to make them look like a link if you want to (see this example).

Now regarding preventing the default action:

Assuming you have a normal link with a proper href value and you want to intercept the click. In the click handler you assign to the element, e.g.

link.addEventListener('click', function(event){
    // some code
    event.preventDefault();
}, false);

using event.preventDefault() prevents the default action, which in case of a link, is following the URL.

(the code above is an example for W3C compatible browsers, IE is a bit different)