Teach with us

What is the difference between event.preventDefault() and event.stopPropagation() in jQuery?

jQueryWeb DevelopmentFront End Technology

stopPropogation() method

To stop the bubbling of an event to parent elements, use the stopPropagation() method.

Example

You can try to run the following code to learn how to work with stopPropogation() method:

Live Demo

<html>

   <head>
      <title>jQuery stopPropagation() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function(event){
               alert("This is : " + $(this).text());
               
               event.stopPropagation();
            });
         });
      </script>
       
      <style>
         div {
             margin:10px;
             padding:12px;
             border:2px solid #666;
             width:160px;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any box to see the effect:</p>
       
      <div id = "div1" style = "background-color:blue;">
         OUTER BOX
         <div id = "div2" style = "background-color:red;">
            INNER BOX
         </div>
      </div>
       
   </body>
</html>

preventDefault() method

The preventDefault() method prevents the browser from executing the default action.

Example

You can try to run the following code to run event.preventDefault() method in jQuery:

Live Demo

<html>

   <head>
      <title>jQuery preventDefault() method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $("a").click(function(event){
               event.preventDefault();
               alert( "Default behavior is disabled!" );
            });
         });
      </script>
   </head>
   
   <body>
      <span>Click the following link and it won't work:</span>
      <a href = "https://www.qries.com">Qries</a>
   </body>
   
</html>
raja
Alex Onsman
Published on 20-Dec-2017 08:16:29

Previous Page Print Page Next Page  
Advertisements