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= </script></head><body> <a id="first" href="www.neveropen.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= </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= </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= </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 |
