เมธอด stopPropagation() ของ HTML DOM Event ใช้สำหรับหยุดการแพร่กระจายขององค์ประกอบที่กำหนด หมายความว่าการคลิกบนองค์ประกอบพาเรนต์จะไม่แพร่กระจายไปยังลูก และการคลิกบนองค์ประกอบลูกจะไม่แพร่กระจายไปยังพาเรนต์ โดยใช้เมธอด stopPropagation() การแพร่กระจายเหตุการณ์ยังเรียกว่าการฟองน้ำของเหตุการณ์ (event bubbling)
ไวยากรณ์
ไวยากรณ์สำหรับเมธอด stopPropagation() ของเหตุการณ์:
event.stopPropagation()
ตัวอย่าง
มาดูตัวอย่างสำหรับเมธอด stopPropagation() ของเหตุการณ์:
<!DOCTYPE html> <html> <head> <style> #DIV_1 { background: lightpink; width:130px; height:130px; margin-left:40%; text-align:center; } #IMG_1 { width:100px; height:100px; position:relative; left:5px; } </style> </head> <body> <h1>stopPropagation() method example</h1> <div id="DIV_1" onclick="OuterDiv()"> DIV ELEMENT <img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg"> </div> Stop propagation: <input type="checkbox" id="check"> <script> function InnerImg(event) { confirm("Inner Image is clicked"); if (document.getElementById("check").checked) { event.stopPropagation(); } } function OuterDiv() { confirm("Outer div is clicked"); } </script> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
เมื่อคลิกองค์ประกอบรูปภาพภายใน div โดยไม่ติ๊ก stop propagation ก่อน:
เมื่อคลิก “Ok” ด้านบน:
เมื่อติ๊ก checkbox stop propagation แล้วคลิกที่รูปภาพภายใน:
