Difference between preventDefault() and stopPropagation() methods in JavaScript
Last Updated :
23 Mar, 2023
In this article, we will be discussing the PreventDefault & stopPropagation methods with suitable code examples for each condition & then we will see the difference between the PreventDefault vs stopPropagation.
JavaScript preventDefault() Method: It is a method present in the event interface. This method prevents the browser from executing the default behavior of the selected element. This method can cancel the event only if the event is cancelable. For example, there are some events that can not be prevented, such as the scroll and wheel event.
Syntax:
event.preventDefault();
Parameter: This method does not accept any parameter.
We will see the approaches for applying both methods with the help of the examples.
Example 1: Preventing a link from following the URL so that the browser can not go to another page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<a id="first" href="www.geeksforgeeks.com">
GeeksForGeeks
</a>
<script>
$("#first").click(function () {
event.preventDefault();
alert("Event prevented, Can't go there.");
});
</script>
</body>
</html>
Output:
Example 2: It prevents the user from checking the checkboxes. Usually, when we click on the checkboxes, it toggles but nothing will work, after calling the preventDefault() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<input type="checkbox" id="f" />
click on this box
<script>
$("#f").click(function () {
event.preventDefault();
alert("Event prevented");
});
</script>
</body>
</html>
Output:
JavaScript stopPropagation() event method: This method is used to prevent the parent element from accessing the event. Basically, this method is used to prevent the propagation of the same event from being called. For eg, we have a button element inside a div tag and there is an onclick event on both of them, then whenever we try to activate the event attached to the button element, then the event attached to the div element also gets executed because div is the parent of the button element.
syntax:
event.stopPropagation();
We can solve this problem by using the stopPropagation() method because this will prevent the parent from accessing the event.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<div class="first" onclick="functionFirst()">
<button onclick="functionSecond()">
Button
</button>
</div>
<script>
function functionSecond() {
alert("button hello");
}
function functionFirst() {
alert("div hello");
}
</script>
</body>
</html>
Output:
Here, after clicking on the button, both functions will be executed.
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<div class="first" onclick="functionFirst()">
<button onclick="functionSecond()">
Button
</button>
</div>
<script>
function functionSecond() {
event.stopPropagation();
alert("button hello");
}
function functionFirst() {
alert("div hello");
}
</script>
</body>
</html>
Output:
Now, in this case, we have added an event.stopPropagation() method, then the only function of the button element will be executed.
Difference between preventDefault() vs stopPropagation() Methods:
event.preventDefault() Method
| event.stopPropagation() Method
|
|---|
| Prevent the default action of browsers taking on that event. | Prevent further propagation of current events by parent or child elements. |
| It is a method present in the Event interface. | This method is also present in the Event interface. |
| For example, it prevents the browser from following a link. | It can not stop the default behavior of the browser. |
|
Its syntax is -:
event.preventDefault();
|
Its syntax is -:
event.stopPropagation();
|
| This method does not take any parameters | This method also does not take any arguments in its definition |
| Its supported browsers are -: chrome, firefox, safari, opera, etc | Its supported browsers are -: chrome, firefox, safari, opera, etc |
| It does not return value | It does not have any return type |
| Its uses the DOM version of DOM Level 3 Events | Its uses the DOM version of DOM Level 2 Events |
Similar Reads
Difference between stopPropagation vs stopImmediatePropagation in JavaScript An event propagates or bubbles till the window object-level every time a registered event is called. For example, Let us consider a parent div element ("Div Parent") that contains another child div element ("Div child"), and for both, a click event is registered. If child div is clicked, the event w
3 min read
What is the difference between find() and filter() methods in JavaScript ? In this article, we will see the difference between the find() and filter() methods in javascript. JavaScript find() method: The find() method is used to find all the descendant elements of the selected element. It finds the element in the DOM tree by traversing through the root to the leaf. Syntax:
2 min read
What is the difference between parent() and parents() methods in jQuery ? The jQuery parent() and parents() methods return the elements which are ancestors of the DOM. It traverses upwards in the DOM for finding ancestors. In this article, we will learn about the difference between parent() and parents() methods. parent() Method: The parent() method traverse only one leve
4 min read
What is the difference between freeze and seal in JavaScript? In JavaScript, Object.freeze makes an object immutable, preventing any changes to existing properties and values. Object.seal allows changes to existing properties but prevents adding or removing properties. Both methods enforce strict immutability, but freeze is stricter than seal. Table of Content
2 min read
Understanding the Difference between Pure and Impure Functions in JavaScript In this article, we will see the concepts of pure and impure functions in JavaScript, along with understanding their differences, & basic implementation for a better understanding of the concepts. Pure Functions: This function always returns the same output as given the same input parameters. Pu
4 min read
JavaScript Handler preventExtensions() Method JavaScript handler.preventExtensions() method in JavaScript is a trap for Object.preventExtensions() method. New properties cannot be added to an object when extensions are disabled. It returns a boolean value. Syntax: const p = new Proxy(target, { preventExtensions: function(target) { } }); Paramet
2 min read