Question

I know that JavaScript return false means prevent default event (like preventDefault() method).

#1

<a href="http://stackoverflow.com" onclick="return false;">click</a>

#2

<a id="a" href="http://stackoverflow.com">click</a>
<script>
document.getElementById('a').addEventListener('click', function(){  return false; }, false);
</script>

I wonder why just #1 prevent default event but not #2. Did I make some mistake?

Edit:
Sorry, I missed an id of anchor tag and third argument of code in #2. I added it but it’s still not working.

Answer 1

There are two problems with your second example:

1. You’re using document.getElementById but you’re giving a tagname. You can probably use document.getElementsByTagName (which returns a NodeList you would then index into), or give the element an id attribute and use getElementById to look it up.

2. Your addEventListener call is missing the third argument, which is required. So:

   document.getElementById('someId').addEventListener(
       'click',
       function(){  return false; },
       false // <=== Third argument, you almost certainly want `false`
   );
   

Regarding your question about return false: If you’re using a browser that supports addEventListener and you’re hooking up event handlers with it, no, you don’t use return false to prevent the default action. Instead, you use event#preventDefault. (You can also use event#stopPropagation to stop the event bubbling, but DOM0’s return false doesn’t do that, so that’s just an extra bonus.)

document.getElementById('someId').addEventListener(
    'click',
    function(e){
        // Prevent the default action of the link
        e.preventDefault();

        // Stop the event propagating (bubbling) to the parent element
        e.stopPropagation();
    },
    false
);

Also note that there are a lot of people using IE8 and earlier, which do not support addEventListener (instead, they support Microsoft’s original attachEvent; but not all versions support preventDefault or stopPropagation).

---

Somewhat off-topic: As you can see, handling events in a cross-browser way is a hassle. It’s one of the many hassles you can avoid by using a decent JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over browser differences and provide lots of helpful utility functionality, so you can focus on what you’re actually trying to build (rather than worrying about how IE7 and earlier have a broken version of getElementById).

Examples:

jQuery: jQuery provides a return false feature (although it’s different from the DOM0 one you’re talking about), and it also ensures that event#preventDefault and event#stopPropagation work regardless of how the underlying browser handles events. So either of these work with jQuery:

// Using return false (which prevents the default AND -- unlike DOM0 stuff -- stops propagation)
$('#someId').click(function() { return false; });

// Using the DOM standard event methods -- even on browsers that don't support them
$('#someId').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Prototype: Prototype provides the DOM standard event methods (even on browsers that don’t support them) as well as event#stop which is just a combination of preventing the default and stopping propagation:

// Using `stop` (which prevents the default and stops propagation)
$('someId').observe('click', function(e) { e.stop(); });

// Using the DOM standard event methods -- even on browsers that don't support them
$('someId').observe('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Other libraries will offer similar functionality.