ฉันได้อ่านบทความมากมายเกี่ยวกับปัญหานี้มาก่อน ตัวอย่างเช่นใช้ตัวแปรเพื่อบันทึกช่วงเวลาการดำเนินการ ฉันรู้สึกว่าฉันต้องไปและช่วยตัวเองทุกครั้งซึ่งค่อนข้างเหนื่อย ฉันชอบเลือกเครื่องมือก่อนที่จะเคลื่อนย้ายอิฐ ในความเป็นจริงการแก้ปัญหานั้นง่ายมาก Iscroll สกัดกั้น TouchStart และ touchend เหตุการณ์เมื่อคลิกที่เบราว์เซอร์ เมื่อ touchend ให้ใช้ JS เพื่อทริกเกอร์เหตุการณ์ onclick ขององค์ประกอบ (function_end) ในการดำเนินการจริง TouchEnd จะถูกดำเนินการครั้งแรกจากนั้นฟังก์ชั่นที่เกี่ยวข้องกับ onClick จะถูกดำเนินการอีกครั้ง สิ่งนี้สร้างอาการปวดหัวของการเรียกสองครั้งในครั้งเดียวคลิก นี่ไม่ใช่ปัญหา เหตุผลที่เป็นปัญหานี้คือเราต้องดูที่ซอร์สโค้ดของ ISCroll วิธีการแก้ปัญหานี้คือการปฏิเสธที่จะเรียกใช้ฟังก์ชันเป็นครั้งที่สอง และตรรกะของฉันเป็นกรณี หลังจากดำเนินการรหัสที่ทริกเกอร์เหตุการณ์การคลิกในฟังก์ชัน _end เราสามารถลบฟังก์ชั่นที่ถูกผูกไว้กับเหตุการณ์ onclick จากนั้นเพิ่มเหตุการณ์นี้อีกครั้งหลังจากเวลาไม่กี่ร้อยมิลลิวินาที ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
// ก่อนการประมวลผล
<span onclick = "test ()"> ดับเบิลคลิกเพื่อทดสอบ </span>
// หลังการประมวลผล
<span onclick = "void (0)"> ดับเบิลคลิกเพื่อทดสอบ </span>
หลังจากลบฟังก์ชั่นที่เกี่ยวข้องกับ onclick ครั้งที่สองนี้จะไม่กระตุ้นฟังก์ชั่นการทดสอบอีกครั้ง ในการใช้งานต่อไปในครั้งต่อไปเราสามารถใช้ settimeout เพื่อกู้คืนเนื้อหาของ onclick กลับ
ซอร์สโค้ด Iscroll ที่แก้ไขแล้ว (ประมาณ 550 บรรทัดถึง 570 บรรทัดในฟังก์ชัน _end):
การคัดลอกรหัสมีดังนี้:
That.doubleTaptimer = settimeout (function () {
that.doubletaptimer = null;
// ค้นหาองค์ประกอบที่สัมผัสสุดท้าย
Target = point.target;
ในขณะที่ (target.nodeType! = 1) target = target.parentNode;
if (target.tagname! = 'select' && target.tagname! = 'input' && target.tagname! = 'textarea') {
ev = doc.createeevent ('MouseEvents');
ev.initmousevent ('คลิก', จริง, จริง, e.view, 1,
point.screenx, point.screeny, point.clientx, point.clienty,
E.Ctrlkey, E.Altkey, E.ShiftKey, E.Metakey,
0, null);
ev._fake = true;
Target.dispatchevent (EV);
/** รหัสต่อไปนี้เป็นรหัสใหม่ **/
// ค้นหาองค์ประกอบที่เชื่อมโยงเหตุการณ์คลิก
var obj = $ (เป้าหมาย) .attr ("onclick")! = null? $ (เป้าหมาย): $ (เป้าหมาย) .parents ("[onclick]") [0];
ถ้า (obj! = null) {
var clickContent = $ (obj) .attr ("onclick");
ถ้า (clickContent! = "void (0)") {
// ใช้แอตทริบิวต์ใหม่เพื่อจัดเก็บฟังก์ชั่นคลิกดั้งเดิม
$ (obj) .attr ("data-clickbak", $ (obj) .attr ("onclick"));
// เปลี่ยนค่าของแอตทริบิวต์ onClick
$ (obj) .attr ("onclick", "void (0)");
// ป้องกันการคลิกที่รุนแรง
if (that.hashbox.length> 0) {
สำหรับ (var _i = 0; _i <that.hashbox.length; _i ++)
-
if (That.hashbox [_i] == $ (obj)) {
That.hashbox.splice (_i, 1);
หยุดพัก;
-
-
-
That.hashbox.push ($ (OBJ));
นั่น _clickback ();
-
}//จบ
-
}, that.options.zoom? 250: 0);
_clickback function และ hashbox code snippet (เพิ่มก่อนฟังก์ชั่น _end)
การคัดลอกรหัสมีดังนี้:
HashBox: [],
/*กู้คืนเหตุการณ์ของวัตถุที่คลิก*/
_clickback: function () {
var that = this;
settimeout (function () {
if (that.hashbox.length> 0) {
var obj = That.hashbox.pop ();
obj.attr ("onclick", obj.attr ("data-clickbak"));
if (that.hashbox.length> 0) that._clickback ();
-
}, 500);
-
แน่นอนว่ามันยังสามารถนำไปใช้ผ่านฟังก์ชั่นสาธารณะโดยไม่ต้องปรับเปลี่ยนซอร์สโค้ด iScroll
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ที่จะใช้การควบคุมการเลื่อน Iscroll