Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM stopPropagation() Event method
The HTML DOM stopPropagation() event method is used for stopping the propagation of the given element. This means that clicking on the parent element won’t propagate to children and clicking on the children elements won’t propagate to parent using the stopPropagtion() method. The event propagation is also called event bubbling.
Syntax
Following is the syntax for the stopPropagation() event method −
event.stopPropagation()
Example
Let us look at the example for the stopPropagation() event method −
<!DOCTYPE html>
<html>
<head>
<style>
#DIV_1 {
background: lightpink;
width:130px;
height:130px;
margin-left:40%;
text-align:center;
}
#IMG_1 {
width:100px;
height:100px;
position:relative;
left:5px;
}
</style>
</head>
<body>
<h1>stopPropagation() method example</h1>
<div id="DIV_1" onclick="OuterDiv()">
DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
Stop propagation:
<input type="checkbox" id="check">
<script>
function InnerImg(event) {
confirm("Inner Image is clicked");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function OuterDiv() {
confirm("Outer div is clicked");
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the Image element inside the div element without clicking first on stop propagation method −
On clicking “Ok” above −
On checking the stop propagation checkbox and then clicking on the inner image −
Updated on: 19-Feb-2021
1K+ Views
Advertisements