stopPropogation() vs preventDefault() in JavaScript

In the previous blog post, we looked at what event bubbling is and how we can implement it.

In this article we’ll see what is the difference between stopPropogation() and preventDefault() methods in an event handler.

e.stopPropagation()

The stopPropagation() on an event will stop bubbling until the event chain.

If you call the stopPropagation() on the event then the event won’t be bubbled up and the parent element will not receive the event triggers.

We’ll use the event bubbling demo code here to stop propagating. In the event bubbling example, it will trigger all the events when we click on any of the TD element. Let’s stop the event bubbling when we click on any TD element.

Let’s change the TD click event to have our stopPropogation.

1
2
3
4

$("td").on("click", function (e) {
  e.stopPropagation();
  alert("td click fired");
});

Once we did the above change, our events won’t be bubbled up top when the click event happens on the TD element.

Stopping the propagation/bubbling can be useful if we use event delegation to have a single event for all the nested elements (ex: a single event on a table element, which will take care of where it was clicked and what action it has to take).

Here is the jsFiddle demo with the propagation stopped on the td element.

Try clicking on any of the TD cells and you should only get one alert instead of getting multiple alerts.

e.preventDefault()

Unlike stopPropagation(), preventDefault() will prevent the default browser action on that event.

Let’s say we have an input field which is a postal code or PIN code. We don’t want the user to enter alphabets and special characters into the field. The field should only accept numbers.

One way to do is instead of having the input type as the text we can have the type as a number so that only numbers will be accepted but this will allow the user to decrement or increment the numbers in the input by using arrow keys (up/down).

So, let‘s wire up a keypress event on that element and call the preventDefault() on the event if the entered character is not a number.

Here is how it can be done.

1
2
3
4
5

$("#alpha").keypress(function(event) {
  if (event.which != 8 && isNaN(String.fromCharCode(event.which))) {
    event.preventDefault(); //prevents from being entered
  }
});

Here is the demo.

1
2
3
4
5
6
7
8

$("body").keypress(function() {
  alert("body key press");
})
$("#alpha").keypress(function(event) {
  if (event.which != 8 && isNaN(String.fromCharCode(event.which))) {
    event.preventDefault();
  }
});

best place to handle actions on the event

We can stop the event actions anywhere in the event handler.

I’d recommend you to add these event actions at the beginning of the event handler function. This is because if you have the event action (say e.stopPropagation()) at the end of the function, and if your functional code has any run-time errors, then our e.stopPropagation() statement will not be reached and because of to the event bubbling effect, we might end up triggering the events up the hierarchy.

Example:

1
2
3
4

$("td").on("click", function (e) {
  //functional code here
  e.stopPropagation();
});

As you can see from the above code if the function piece of code has any errors the rest of the lines won’t be executed and our e.stopPropagation() statement will not be considered.

Instead of having the e.stopPropagation() at the end of the handler, if we can have it at the beginning of the handler then though our functional code fails, the propagation will not happen (meaning e.stopPropagation() works).

Example:

1
2
3
4

$("td").on("click", function (e) {
  e.stopPropagation();
  //functional code here
});