Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 25 Jul, 2021

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 behaviour 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.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=
    </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=
    </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 event by parent or child element.
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 behaviour of the browser.



My Personal Notes arrow_drop_up
Recommended Articles
Page :