HTML DOM stopPropagation() इवेंट मेथड

HTML DOM stopPropagation() इवेंट मेथड का उपयोग दिए गए एलिमेंट के प्रोपगेशन को रोकने के लिए किया जाता है। इसका अर्थ है कि पैरेंट एलिमेंट पर क्लिक करने से चिल्ड्रन पर प्रोपगेट नहीं होगा और stopPropagation() मेथड का उपयोग करके चिल्ड्रन एलिमेंट्स पर क्लिक करने से पैरेंट पर प्रोपगेट नहीं होगा। इवेंट प्रोपगेशन को इवेंट बबलिंग भी कहा जाता है।

सिंटैक्स

StopPropagation() इवेंट मेथड का सिंटैक्स:

event.stopPropagation()

उदाहरण

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>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

स्टॉप प्रोपगेशन मेथड पर पहले क्लिक किए बिना डिव एलिमेंट के अंदर इमेज एलिमेंट पर क्लिक करने पर:

ऊपर "Ok" पर क्लिक करने पर:

स्टॉप प्रोपगेशन चेकबॉक्स चेक करने और फिर इनर इमेज पर क्लिक करने पर: