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

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

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

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

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

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

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

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

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

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

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

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

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

वर्णित कार्य के सही संचालन को स्वयं लागू करें।