javascript - When to use PreventDefault( ) vs Return false?

Question

This question already has answers here:

Answer 1

return false;

---

return false; does 3 separate things when you call it:

1. event.preventDefault() – It stops the browsers default behaviour.
2. event.stopPropagation() – It prevents the event from propagating (or “bubbling up”) the DOM.
3. Stops callback execution and returns immediately when called.

Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

preventDefault();

---

preventDefault(); does one thing: It stops the browsers default behaviour.

When to use them?

---

We know what they do but when to use them? Simply it depends on what you want to accomplish. Use preventDefault(); if you want to “just” prevent the default browser behaviour. Use return false; when you want to prevent the default browser behaviour and prevent the event from propagating the DOM. In most situations where you would use return false; what you really want is preventDefault().

Examples:

---

Let’s try to understand with examples:

We will see pure JAVASCRIPT example

Example 1:

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>