जावास्क्रिप्ट में ईवेंट बबलिंग को रोकने का अनुप्रयोग

मान लीजिए कि एक माता-पिता के अंदर हमारे पास एक बटन है और कुछ ब्लॉक:

html<div id="parent">
  <button>click me</button>
  <div id="block">
    text
  </div>
</div>

चर में हमारे तत्वों के लिंक प्राप्त करें:

javascriptlet parent = document.querySelector('#parent');
let button = document.querySelector('button');
let block  = document.querySelector('#block');

मान लीजिए कि हमारा ब्लॉक शुरू में छिपा हुआ है:

css#block:not(.active) {
  display: none;
}

आइए ऐसा करें कि बटन पर क्लिक करने पर हमारा ब्लॉक दिखाई दे:

javascriptbutton.addEventListener('click', function() {
  block.classList.add('active');
});

और अब ऐसा करें कि माता-पिता पर कहीं भी क्लिक करने पर हमारा ब्लॉक छिप जाए:

javascriptparent.addEventListener('click', function() {
  block.classList.remove('active');
});

हालाँकि, हमें एक अप्रत्याशित आश्चर्य का सामना करना पड़ेगा: जैसा कि बटन माता-पिता के अंदर स्थित है, इसलिए बटन पर क्लिक करना एक साथ माता-पिता पर क्लिक करना भी है। इसका मतलब है कि पहले हमारा ब्लॉक दिखाई देगा, और फिर ईवेंट बबलिंग के कारण माता-पिता में हैंडलर ट्रिगर होगा और हमारा ब्लॉक छिप जाएगा।

यहीं पर बबलिंग को रद्द करने की क्षमता हमारे काम आती है: हम ऐसा कर सकते हैं कि बटन पर क्लिक करने पर बबलिंग रद्द हो जाए, माता-पिता इस क्लिक पर प्रतिक्रिया नहीं देगा।