জাভাস্ক্রিপ্টে ইভেন্ট বাবলিং বন্ধ করার প্রয়োগ

ধরুন একটি অভিভাবকের ভিতরে আমাদের একটি বাটন এবং একটি নির্দিষ্ট ব্লক আছে:

<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');
});

যাইহোক, আমাদের একটি অপ্রত্যাশিত বিস্ময়ের জন্য অপেক্ষা করছে: যেহেতু বাটনটি অভিভাবকের ভিতরে অবস্থিত, তাই বাটনে ক্লিক করার অর্থ একই সাথে অভিভাবকের উপর ক্লিক করা। এর মানে হল যে প্রথমে আমাদের ব্লকটি দেখা যাবে, এবং তারপর বাবলিং এর কারণে ইভেন্টটি অভিভাবকের মধ্যে কাজ করবে এবং আমাদের ব্লকটি লুকিয়ে যাবে।

এখানেই বাবলিং বাতিল করার ক্ষমতা আমাদের কাজে আসবে: আমরা এমন করতে পারি যে বাটনে ক্লিক করলে বাবলিং বাতিল হয়ে যায়, অভিভাবক এই ক্লিকের প্রতি প্রতিক্রিয়া দেখায় না।

বর্ণিত কাজের সঠিক operation নিজে থেকে বাস্তবায়ন করুন।