การหยุดการฟองของเหตุการณ์ใน JavaScript

การฟองของเหตุการณ์สามารถหยุดที่ องค์ประกอบใดก็ได้ที่เหตุการณ์ฟองผ่าน ในการทำเช่นนี้ ในโค้ดขององค์ประกอบควรเรียกใช้ เมธอด stopPropagation ของออบเจ็กต์ Event

ในตัวอย่างต่อไปนี้ การคลิกที่บล็อกสีแดง จะทำงานบนตัวมันเอง จากนั้นบนบล็อก สีฟ้าและนั่นคือทั้งหมด - บล็อกสีฟ้าหยุดการฟองต่อไป และบล็อกสีเขียวจะไม่ตอบสนองอีกต่อไป:

javascriptelem1.addEventListener('click', function() {
  console.log('สีเขียว');
});
elem2.addEventListener('click', function(event) {
  console.log('สีฟ้า');
  event.stopPropagation(); // หยุดการฟอง
});
elem3.addEventListener('click', function() {
  console.log('สีแดง');
});

คุณสามารถทดสอบได้: