การใช้งานการหยุดการแพร่กระจายของเหตุการณ์ใน JavaScript

สมมติว่าภายใน parent หนึ่ง เรามีปุ่ม และบล็อกบางส่วน:

<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 บล็อกของเราจะซ่อน:

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

อย่างไรก็ตาม เรากำลังรอเซอร์ไพรส์ที่ไม่คาดคิด: เนื่องจาก ปุ่มอยู่ภายใน parent ดังนั้น การคลิกที่ปุ่มจึงหมายถึงการคลิก ที่ parent ด้วย นี่หมายความว่าตอนแรก บล็อกของเราจะแสดง จากนั้นเนื่องจากการแพร่กระจาย ของเหตุการณ์ ตัวจัดการใน parent จะทำงานและ บล็อกของเราจะซ่อน

นี่คือจุดที่ความสามารถในการยกเลิกการแพร่กระจายจะมีประโยชน์สำหรับเรา: เราสามารถทำให้เมื่อ คลิกที่ปุ่มให้ยกเลิกการแพร่กระจาย parent จะไม่ตอบสนองต่อการคลิกนี้

ดำเนินการทำงานที่ถูกต้องของ งานที่อธิบายไว้โดยอิสระ