หลายครั้งที่เราทำส่วนหน้าเราจะมีคุณสมบัติเล็ก ๆ น้อย ๆ . สมมติว่าฉากต่อไปนี้ปุ่มเล็ก ๆ คลิกเพื่อปรากฏขึ้นกล่องโมดูลาร์
มันง่าย แต่เมื่อเราต้องการคลิกที่ส่วนที่ว่างเปล่าซ่อนกล่องโมดอลเพิ่มรหัสปุ่ม: btn, กล่องโมดอล ID: รุ่น
บางทีความคิดที่ง่ายที่สุดของเราคือการฟังเหตุการณ์โดยตรงในเอกสาร
ปุ่มคลิกเหตุการณ์ป๊อปอัพเพื่อตรวจสอบ:
คัดลอกรหัสรหัสดังนี้:
$ ("#BTN")
ถ้า (E.StopPropagation) {// จำเป็นต้องหยุดเดือด
E.StopPropagation ();
} อื่น {
E.CancelBubble = true;
-
-
คัดลอกรหัสรหัสดังนี้:
$ (docume). -bind ("คลิก", ฟังก์ชั่น (e) {
ถ้า (เหตุการณ์คลิกไม่ได้อยู่ในรุ่น) {
กล่องโมดอลที่ซ่อนอยู่;
-
-
อย่างรวดเร็วก่อนไม่มีปัญหา แต่จริงๆแล้วมีปัญหามากมาย เมื่อเรายังมีการควบคุมเล็ก ๆ จำนวนมากบนเฟรมโมดอลมันเป็นเรื่องยากที่จะตัดสินการคลิกในกล่องโมดอล
ที่นี่ฉันคิดว่ามีวิธีคลาสสิกที่สุดซึ่งเรียบง่าย แต่ฉลาดมาก
ก่อนอื่นเหตุการณ์มีดังนี้ในรูปแบบของกรอบโมดอล:
คัดลอกรหัสรหัสดังนี้:
$ ("#Modal")
if (Event && Event.stopPropagation) {{
Event.StopPropagation ();
} อื่น {
Event.cancelBubble = true;
-
-
เพียงแค่ป้องกันการคลิกในกล่องโหมดเดือด
แล้ว:
คัดลอกรหัสรหัสดังนี้:
$ (docume). one ("คลิก" ฟังก์ชั่น (e) {
var $ target = $ (E.CurrentTarget);
if ($ target.attr ("id")! = "modal") {{
$ ("#Modal")
-
-
ทำมันง่ายมาก