दिए गए तत्व के प्रसार को रोकने के लिए HTML DOM स्टॉपप्रॉपैगेशन () ईवेंट विधि का उपयोग किया जाता है। इसका मतलब यह है कि पैरेंट एलिमेंट पर क्लिक करने से बच्चों में प्रचार नहीं होगा और चाइल्ड एलिमेंट पर क्लिक करने से स्टॉपप्रॉपैगशन () मेथड का इस्तेमाल करके पैरेंट को प्रोपेगेट नहीं किया जाएगा। इवेंट प्रचार को इवेंट बबलिंग भी कहा जाता है।
सिंटैक्स
स्टॉपप्रॉपैगेशन () इवेंट मेथड के लिए सिंटैक्स निम्नलिखित है -
event.stopPropagation()
उदाहरण
आइए स्टॉपप्रॉपैगेशन () इवेंट मेथड के लिए उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
स्टॉप प्रोपेगेशन मेथड पर पहले क्लिक किए बिना डिव एलिमेंट के अंदर इमेज एलिमेंट पर क्लिक करने पर -
ऊपर "ओके" पर क्लिक करने पर -
स्टॉप प्रोपेगेशन चेकबॉक्स को चेक करने पर और फिर इनर इमेज पर क्लिक करने पर -
