Syntax error How we can prioritize jQuery events?

How we can prioritize jQuery events?

To prioritize jQuery events, use the event.stopPropagation().

Example

You can try to run the following code to learn how to prioritize using stopPropogation() method:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
   var timer;
   function out(s) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      $("#demo").append(s + "<br>");
      timer = setTimeout(function() {
        $("#demo").append("-------" + "<br>");
        timer = null;
      }, 100);
   }

   $(".li").find('input').click(function(e){
    out('li>input');
    if ($(this).parent().hasClass("stop")) {
        e.stopPropagation();
    }
   });

   $(".li").click(function(e){
    out('li');
   });

   $('input').click(function(e){
    out('input');
    if ($(this).parent().hasClass("stop")) {
        e.stopPropagation();
    }
   });
});
</script>
</head>
<body>

<ul>
<li class="li"><input type="checkbox" /><span>Demo</span></li>
<li class="li stop"><input type="checkbox" /><span>Demo using stop propagation method</span></li>
</ul>
<div id="demo"></div>
</body>
</html>
Updated on: 2019-12-11T07:25:43+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements