Prevent anchor behaviour

When I want to prevent default behaviour of anchor tag I`m using

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

Which is the most effective solution ?

Answers:

Answer

An example of a gracefully degrading solution:

<a href="no-script.html" id="myLink">link</a>

<script>
document.getElementById("myLink").onclick = function() {
    // do things, and then
    return false;
};
</script>

Demo: http://jsfiddle.net/karim79/PkgWL/1/

Answer

This is a nice approach, if you're using jquery you can also do:

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

<script type="text/javascript">
   $("#link").click(function(ev) {
       ev.preventDefault();
   });
</script>

preventDefault can be useful also to prevent submitting form

Answer

You can also have this:

<a href="#" onclick="return false;">link</a>
Answer

If you never want for the browser to follow the link anywhere, I'd say what you've got is the simplest, safest solution.

Sure, there are heaps of other solutions you could apply with javascript, but most other ways may fail when

  • The DOM is not completely loaded, if the event is assigned at DOMReady or later, which is common.
  • A click event listener handles the link (which is common where you want links not to be followed by the browser). If an error occurs in the javascript that handles the click, the return false; or preventDefault that might be at the end of the statement, will not be executed, and the browser will follow the link, if only to #.
Answer

Here is very easy way to stop this.

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

I know it's an old thread but here is what I use often

Instead of this:

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

This also can work:

<a href="javascript:;">link</a>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.