เหตุการณ์เดือดพล่านคืออะไร?
นั่นคือเมื่อมีการซ้อนกันหลาย div นั่นคือ ความสัมพันธ์ระหว่างพาเรนต์และรองจะถูกสร้างขึ้น เมื่อ div ระดับบนสุดและ div ระดับล่างเข้าร่วมเหตุการณ์ onclick เมื่อเหตุการณ์ onclick ของ div ระดับล่างถูกทริกเกอร์ div ระดับล่างจะดำเนินการที่สอดคล้องกัน การดำเนินการ js แต่เหตุการณ์ onclick ของ div หลักก็จะถูกทริกเกอร์เช่นกัน ส่งผลให้เกิดเหตุการณ์ที่เกิดขึ้นพร้อมกันหลายระดับ นำไปสู่ความสับสนวุ่นวายในเพจ นี่คือเหตุการณ์ที่เดือดปุด ๆ
วิธีกำจัดเหตุการณ์เดือดพล่าน
ป้องกันไม่ให้เหตุการณ์ JavaScript เดือด (cancelBubble, stopPropagation)
โค้ดต่อไปนี้สามารถอธิบายได้เป็นอย่างดีว่าเอฟเฟกต์ฟองสบู่คืออะไร และอะไรคือการกำจัดเอฟเฟกต์ฟองสบู่?
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<title> ป้องกันเหตุการณ์ JavaScript เดือดปุด ๆ (cancelBubble, stopPropagation)</title>
<meta name="keywords" content="JavaScript, เหตุการณ์เดือดปุด ๆ, cancelBubble, หยุดการขยายพันธุ์" />
<script type="text/javascript">
ฟังก์ชั่น doSomething (obj, evt) {
การแจ้งเตือน (obj.id);
var e=(evt)?evt:window.event; //กำหนดประเภทเบราว์เซอร์และใช้ cancelBubble ในเบราว์เซอร์ที่ใช้เคอร์เนล IE
ถ้า (window.event) {
e.cancelBubble=true;
} อื่น {
//e.preventDefault(); //สนับสนุนวิธี stopPropagation ในเบราว์เซอร์ที่ใช้เคอร์เนล Firefox
e.stopPropagation();
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="parent1" onclick="alert(this.id)">
<p>นี่คือ parent1 div</p>
<div id="child1" onclick="alert(this.id)">
<p>นี่คือลูก1</p>
</div>
<p>นี่คือ parent1 div</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)">
<p>นี่คือ parent2 div</p>
<div id="child2" onclick="doSomething(this,event);">
<p>นี่คือลูก2 จะเกิดฟอง</p>
</div>
<p>นี่คือ parent2 div</p>
</div>
</ร่างกาย>
</html>
หลังจากการคัดลอกโค้ดโดยตรง เมื่อคุณคลิกที่ child1 ไม่เพียงแต่กล่องโต้ตอบ child1 จะปรากฏขึ้น แต่กล่องโต้ตอบ parent1 จะปรากฏขึ้นด้วย
นี่คือเหตุการณ์เดือด
แต่การคลิก Chile2 จะแสดงเฉพาะ child2 แต่ไม่ใช่ parent2 นี่คือผลของการใช้เอฟเฟกต์พิเศษที่ป้องกันไม่ให้เกิดฟองสบู่