มีปัญหาเกี่ยวกับฟองสบู่เหตุการณ์และการจับเหตุการณ์ในเหตุการณ์ JavaScript และ JQuery ต่อไปนี้เป็นบทสรุปโดยละเอียดของปัญหาทั้งสองและการแก้ปัญหาของพวกเขา
ฟองสบู่เป็นกระบวนการของฟองสบู่จากเด็กถึงโหนดบรรพบุรุษ
การจับเหตุการณ์เป็นสิ่งที่ตรงกันข้ามและเป็นกระบวนการจากโหนดบรรพบุรุษไปจนถึงโหนดเด็ก
ยกตัวอย่างเหตุการณ์คลิก jQuery:
รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<meta charset = "utf-8">
<title> ทดสอบ </title>
<head>
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text/javascript">
$ (function () {
$ ('#clickme') คลิก (ฟังก์ชัน () {
การแจ้งเตือน ('สวัสดี');
-
$ ('body') คลิก (ฟังก์ชัน () {
การแจ้งเตือน ('ทารก');
-
-
</script>
</head>
<body>
<div>
<button type = "button" id = "button2"> คลิกฉัน </button>
<button id = "clickme"> คลิก </button>
</div>
</body>
</html>
ปรากฏการณ์ฟองสบู่: คลิกปุ่ม "id = clickme" และกล่องป๊อปอัพสองกล่อง "สวัสดี" และ "ที่รัก" จะปรากฏขึ้นหลังจากนั้นอีก
การวิเคราะห์: เมื่อคลิกที่ปุ่ม "id = clickme" เหตุการณ์คลิกที่ถูกผูกไว้กับปุ่มและปุ่มองค์ประกอบหลักและร่างกายจะถูกทริกเกอร์ดังนั้นสองกล่องจะปรากฏขึ้นหลังจากนั้นอีกกล่องหนึ่งและปรากฏการณ์ฟองที่เรียกว่าเกิดขึ้น
ปรากฏการณ์การจับเหตุการณ์: หากคุณคลิกที่ปุ่ม Div และปุ่มที่ไม่ผูกมัดเหตุการณ์คลิกกล่องโต้ตอบ "Baby" จะปรากฏขึ้น
ในโครงการจริงเราต้องการป้องกันฟองสบู่เหตุการณ์และการจับเหตุการณ์
วิธีป้องกันเหตุการณ์จากฟองสบู่:
วิธีที่ 1: ส่งคืนเท็จในเหตุการณ์คลิกปัจจุบัน;
การคัดลอกรหัสมีดังนี้:
$ ('#clickme') คลิก (ฟังก์ชัน () {
การแจ้งเตือน ('สวัสดี');
กลับเท็จ;
-
วิธีที่ 2:
การคัดลอกรหัสมีดังนี้:
$ ('#clickme') คลิก (ฟังก์ชั่น (เหตุการณ์) {
การแจ้งเตือน ('สวัสดี');
var e = window.event || เหตุการณ์;
if (E.StopPropagation) {// ถ้ามีวัตถุเหตุการณ์นั้นให้บริการนี่เป็นเบราว์เซอร์ที่ไม่ใช่
E.StopPropagation ();
}อื่น{
// วิธีที่เข้ากันได้กับการยกเลิกฟองสบู่
window.event.cancelBubble = true;
-
-
ดูเหมือนว่าเหตุการณ์การจับภาพไม่สามารถถูกบล็อกได้