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 unshift() and Push() method in JavaScript?
JavaScript Unshift() method is very much similar to the push() method but the difference is that the unshift() method adds the elements at the very beginning of the array whereas the push() method adds at the end of the array. Javascript Array unshift() method: The JavaScript Array unshift() Method
2 min read
What is the difference between every() and some() methods in JavaScript ?
In this article, we will see the difference between every() and some() methods in JavaScript. Array.every() methodThe Array.every() method in JavaScript is used to check whether all the elements of the array satisfy the given condition or not. The output will be false if even one value does not sati
3 min read
Difference Between setTimeout & setInterval in JavaScript
JavaScript has both setTimeout and setInterval functions that are used for executing code after a certain delay. However, they differ in how they handle the timing of execution. Understanding their differences is crucial for effectively managing asynchronous operations in our code which is explained
2 min read
Difference between DOM parentNode and parentElement in JavaScript
HTML DOM parentNode Property: The parent node property is a read-only property that returns us the name of the parent node of the selected node as a node object. The Node object represents a single node in the document tree and a node can be an element node, text node, or more. Syntax: node.parentNo
2 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
Difference between Methods and Functions in JavaScript
Grasping the difference between methods and functions in JavaScript is essential for developers at all levels. While both are fundamental to writing effective code, they serve different purposes and are used in various contexts. This article breaks down the key distinctions between methods and funct
3 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
Difference between mouseover, mouseenter and mousemove events in JavaScript
Events in JavaScript provide a dynamic interface to the webpage. There are wide variety of events such as user clicking, moving the mouse over an element, etc. Events that occur when the mouse interacts with the HTML document falls under the category of MouseEvent property. mouseover: The onmouseove
2 min read