stopPropogation() vs preventDefault() in JavaScript

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.

Note that the event.preventDefault() will just prevent the event from happening for that specific event. So, if you have any keypress event registered on the on the parent element or ancestors, those will still be fired due to the bubbling effect. e.preventDefault() will not stop the bubbling.

returning false from the event handler in jQuery

returning false from an event in jQuery will have two effects.

The return false; statement in a jQuery event listener does both the e.stopPropagation() and e.preventDefault().

Let’s add a body keypress listener along with the keypress event on the input field.

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();
}
});

So, whenever we press a key in the text box, if the key is other than a number then the character won’t be inserted into the text box and we will present an alert to the user as we have key press event registered on the body tag.

The alert will still be triggered though we enter a number as we are not stopping the propagation in the input field.

Now, let’s replace event.preventDefault() statement with a return false and try that in the fiddler.

You can observe that the alert in body keypress will no longer be presented when we press any alphabet. This is because we are stopping the bubbling and preventing the default action on the event with return false statement.

Here is the modified jsFiddle.

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
});

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×