Plain JavaScript version of e.preventDefault();

Question

With the following jQuery based script you can stop the default action of dummy links, ie: <a href="#">

$('a').click(function(e) {
  e.preventDefault();
});

What would be the plain vanilla version of this script?

I'm not a JavaScript programmer but I'm thinking it may be something that uses return false;. Again, I may be totally wrong.

Thanks in advance for your help.

Answer 1

You have event.preventDefault() available in vanilla javascript as well. In a generic way you can always use return false. If you attach an event handler you are guaranteed to get event agument passed in the handler as opposed to using the onclick or any other attributes of the element (In which case you should rely on the specific event object available in side the handler which you may not get in all browsers, like in IE you would use window.event).

Ex: -

  document.getElementById('someId').addEventListener('click', function(e){ //say this is an anchor
         //do something
        e.preventDefault();
   });

So for all the anchors:

 var anchors = document.getElementsByTagName('a');
 for(i=0, len=anchors.length; i<len; i++){
     anchors[i].addEventListener('click', function(e){e.preventDefault();});
 }

Answer 2

// Like $('a'), gets all the <a> elements in the document.
var aElements = document.getElementsByTagName('a');
// Create one function object instead of one per <a> element.
// The calling convention is the same for jQuery as for regular JS.
function preventDefaultListener(e) { e.preventDefault(); }
// For each a element,
for (var i = 0, n = aElements.length; i < n; ++i) {
  // register the listener to be fired on click.
  aElements[i].addEventListener('click', preventDefaultListener);
}

Answer 3

Return false is the way to go. E.g. if your anchor already has an href:

<a href="http://www.google.com" onclick="alert('clicked!');return false">Click me</a>

calling onclick like this will only perform the function, but not the navigation.

Answer 4

yes you can use return false;

<a href="" onclick="return false;">test</a>