เมธอดเหตุการณ์ HTML DOM stopPropagation() ใช้สำหรับหยุดการเผยแพร่องค์ประกอบที่กำหนด ซึ่งหมายความว่าการคลิกที่องค์ประกอบหลักจะไม่เผยแพร่ไปยังรายการย่อย และการคลิกที่องค์ประกอบย่อยจะไม่เผยแพร่ไปยังองค์ประกอบหลักโดยใช้เมธอด stopPropagtion() การขยายพันธุ์เหตุการณ์เรียกอีกอย่างว่าเหตุการณ์เดือดปุด ๆ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอดเหตุการณ์ 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 โดยไม่ต้องคลิกก่อนในวิธีการหยุดการแพร่กระจาย -
เมื่อคลิก “ตกลง” ด้านบน −
ในการตรวจสอบช่องทำเครื่องหมายหยุดการขยายพันธุ์แล้วคลิกที่ภาพภายใน -
