Difference between preventDefault() and stopPropagation() methods in JavaScript

04 Apr, 2022
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.
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:
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.
event.preventDefault() Method
event.stopPropagation() Method
Its syntax is -:
event.preventDefault();
Its syntax is -:
event.stopPropagation();
mayank007rawa
JavaScript-Methods
JavaScript-Questions
Picked
Difference Between
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.