jQuery event.stopImmediatePropagation()

Introduction

Execute the first event handler, and stop the rest of the event handlers:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from   ww w .  j a v a  2 s  .c om
<script>
$(document).ready(function(){
  $("div").click(function(event){
    document.getElementById("demo").innerHTML = "Event handler 1 executed";
      event.stopImmediatePropagation();
  });
  $("div").click(function(event){
    document.getElementById("demo").innerHTML = "Event handler 2 executed";
  });
  $("div").click(function(event){
    document.getElementById("demo").innerHTML = "Event handler 3 executed";
  });
});
</script>
</head>
<body>

<p id="demo"></p>
<div style="height:100px;width:300px;padding:10px;background-color:lightblue;">
Click on this div element.</div>
</body>
</html>

The event.stopImmediatePropagation() method stops the rest of the event handlers.

This method also stops the event from bubbling up the DOM tree.

You can use the event.isImmediatePropagationStopped() method to check whether this method was called for the event.

event.stopImmediatePropagation()

Parameter	Optional	Description
event	Required.	The event parameter comes from the event binding function

Previous Next