What's the difference between event.stopPropagation and event.preventDefault?

events, javascript, preventdefault, stoppropagation

Solution

`stopPropagation` prevents further propagation of the current event in the capturing and bubbling phases.

`preventDefault` prevents the default action the browser makes on that event.

Examples

preventDefault

$("#but").click(function (event) {
  event.preventDefault()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

stopPropagation

$("#but").click(function (event) {
  event.stopPropagation()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

With `stopPropagation`, only the `button`'s click handler is called while the `div`'s click handler never fires.

Where as if you use `preventDefault`, only the browser's default action is stopped but the div's click handler still fires.

Below are some docs on the DOM event properties and methods from MDN:

- `event.cancelBubble`

- `event.preventDefault()`

- `event.returnValue`

- `event.stopPropagation()`

For IE9 and FF you can just use preventDefault & stopPropagation.

To support IE8 and lower replace `stopPropagation` with `cancelBubble` and replace `preventDefault` with `returnValue`

Problem

They seem to be doing the same thing... Is one modern and one old? Or are they supported by different browsers? When I handle events myself (without framework) I just always check for both and execute both if present. (I also `return false`, but I have the feeling that doesn't work with events attached with `node.addEventListener`). So why both? Should I keep checking for both? Or is there actually a difference? (I know, a lot of questions, but they're all sort of the same =))

Original source