วิธีการใช้งานการแตะเหตุการณ์ป้องกันฟองใน zepto.js

บทความนี้อธิบายวิธีการใช้งานของเหตุการณ์แตะใน Zepto.js เพื่อป้องกันฟองสบู่ แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:

เมื่อเร็ว ๆ นี้ฉันกำลังทำงานบนเว็บไซต์รุ่นมือถือ ตอนแรกฉันต้องการใช้ jQuery mobile แต่ไฟล์มีขนาดใหญ่เกินไปดังนั้นฉันจึงใช้ zepto.js

เนื่องจากจะมีความล่าช้าในการใช้กิจกรรมคลิกในเว็บเพจมือถือจึงใช้เหตุการณ์แตะใน Zepto.js

การใช้เหตุการณ์คลิกสามารถใช้ stoppropagation เพื่อป้องกันฟอง แต่แตะโดยใช้วิธีนี้ไม่มีประสิทธิภาพ

ตอนนี้ฉันต้องบรรลุผลดังกล่าว: คลิกปุ่ม A.BTN จากนั้นแสดง div.panel และซ่อน div.panel เมื่อฉันคลิกที่ non-div.panel

 $ ("A.BTN"). ON ("TAP", ฟังก์ชั่น (e) {E.STOPPROPAGATION (); // วิธีนี้ไม่ทำงาน $ ("div.Panel"). show ();}); $ (เอกสาร) .on ("แตะ", ฟังก์ชั่น (e) {$ ("div.panel"). ซ่อน ();});

ผ่านเครื่องมือการดีบักเราสามารถรับแอตทริบิวต์เป้าหมายในวัตถุ E เพื่อให้เราสามารถบรรลุเอฟเฟกต์ที่ต้องการผ่านแอตทริบิวต์นี้:

 $ ("A.Btn"). on ("tap", function () {$ ("div.panel"). show ();}); $ (เอกสาร) .on ("tap", ฟังก์ชั่น (e) {ถ้า (! $ (e.target) .hasclass ("btn")) {$ ("div.panel")

นี่คือวิธีแก้ปัญหา

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน