How we can prioritize jQuery events?

jQueryWeb DevelopmentFront End Technology

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>
raja
Published on 20-Dec-2017 12:37:52
Advertisements