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

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

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

และตอนนี้ทำให้เมื่อคลิกที่ใดก็ได้ บน parent บล็อกของเราจะซ่อน:

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

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

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