Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery event.stopImmediatePropagation() Method
jQuery | event.stopImmediatePropagation() Method: Learn about the jQuery event.stopImmediatePropagation() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 29, 2022
event.stopImmediatePropagation() Method
An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.stopImmediatePropagation() method.
The event.stopImmediatePropagation() is a built-in method in jQuery. The stopImmediatePropagation() method allows the element to avoid the execution of the rest event handler for the specific elements. It stops the further propagation of events for the element or similar elements. This method helps to stop the bubbling of the events.
We can also use event.isImmediatePropagationStopped() method to check whether the event.stopImmediatePropagation() has been successfully implemented for the selected element or not.
event.stopImmediatePropagation() Method Syntax
event.isPropagationStopped
This method does not require any parameter. The below example shows how the event.stopImmediatePropagation() method is triggered when the sentences are clicked and hence avoids the execution of the events attached to them.
jQuery event.stopImmediatePropagation() Method Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<h2>jQuery Event Property - Stop Immediate Propagation </h2>
<div>Click the following sentences to implement the <b>event.stopImmediatePropagation property</b> of jQuery.</div>
<hr>
<p>Welcome to Include Help</p>
<p>This is jQuery tutorial for events.</p>
<p>Thanks for visiting</p>
<hr>
<h3></h3>
</body>
<script type="text/javascript">
$(document).ready(function(event){
$('p').click(function(event){
event.stopImmediatePropagation();
$('h3').html('Event Triggered !');
});
$('p').click(function(event){
$('h3').html('Paragraph Two - Clicked');
});
$('p').click(function(event){
$('h3').html('Paragraph Three - Clicked');
});
});
</script>
</html>
Output:
