บนอุปกรณ์หน้าจอสัมผัสต้องใช้ท่าทางพื้นฐานบางอย่างที่ค่อนข้างจะต้องดำเนินการโดยการห่อหุ้มเหตุการณ์รอง
Zepto เป็นห้องสมุดคลาสที่มีอัตราการใช้งานค่อนข้างสูงบนอุปกรณ์มือถือ แต่บางเหตุการณ์ที่จำลองโดยโมดูลสัมผัสมีปัญหาความเข้ากันได้เช่นเหตุการณ์แตะที่มีข้อบกพร่องในการเจาะเหตุการณ์บนอุปกรณ์ Android บางตัวและเหตุการณ์อื่น ๆ ก็มีปัญหาความเข้ากันได้มากหรือน้อย
ดังนั้นฉันแค่ห่อหุ้มเหตุการณ์ท่าทางที่ใช้กันทั่วไปเหล่านี้ด้วยตัวเอง เนื่องจากมีอุปกรณ์จริงไม่มากนักที่จะทดสอบอาจมีปัญหาความเข้ากันได้บ้าง รหัสต่อไปนี้ได้รับการทดสอบเฉพาะในเบราว์เซอร์ทั่วไปใน iOS 7 และ Andorid 4
แตะเหตุการณ์
เหตุการณ์แตะเทียบเท่ากับเอฟเฟกต์การคลิกในเบราว์เซอร์พีซี แม้ว่าเหตุการณ์การคลิกยังคงมีอยู่ในอุปกรณ์หน้าจอสัมผัส แต่จะมีความล่าช้าในการคลิกบนอุปกรณ์จำนวนมาก หากคุณต้องการตอบสนองอย่างรวดเร็วถึงเหตุการณ์ "คลิก" คุณต้องใช้เหตุการณ์สัมผัสเพื่อให้ได้มัน
การคัดลอกรหัสมีดังนี้:
var starttx, startty;
element.addeventListener ('TouchStart', ฟังก์ชั่น (e) {
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
}, เท็จ );
element.addeventListener ('touchend', ฟังก์ชั่น (e) {
var touches = e.changedTouches [0]
endtx = touches.clientx
endty = touches.clienty;
// ในอุปกรณ์บางอย่างเหตุการณ์การสัมผัสมีความอ่อนไหวมากขึ้นส่งผลให้เกิดการเปลี่ยนแปลงเล็กน้อยในพิกัดเหตุการณ์เมื่อกดและปล่อยนิ้ว
if (math.abs (starttx - endtx) <6 && math.abs (startty - endty) <6) {
console.log ('Event Fire Tap');
-
}, เท็จ );
เหตุการณ์ DoubleTap
เหตุการณ์ DoubleTap เป็นเหตุการณ์ที่เกิดขึ้นเมื่อนิ้วแตะหน้าจอสองครั้งภายในช่วงตำแหน่งเดียวกันและในเวลาอันสั้น ในบางเบราว์เซอร์เหตุการณ์ doubleTap เลือกข้อความ หากคุณไม่ต้องการเลือกข้อความคุณสามารถเพิ่มแอตทริบิวต์ CSS ของผู้ใช้เลือก: ไม่มีในองค์ประกอบ
การคัดลอกรหัสมีดังนี้:
var istouchend = false
เมื่อเวลาผ่านไป = 0,
lasttx = null,
lastty = null
FirstTouchend = จริง
body = document.body
dtaptimer, starttx, startty, starttime;
element.addeventListener ('TouchStart', ฟังก์ชั่น (e) {
ถ้า (dtaptimer) {
ClearTimeOut (DTAPTIMER);
dtaptimer = null;
-
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
}, เท็จ );
element.addeventListener ('touchend', ฟังก์ชั่น (e) {
var touches = e.changedTouches [0]
endtx = touches.clientx
endty = touches.clienty,
ตอนนี้ = date.now ()
ระยะเวลา = ตอนนี้ - เมื่อเวลาผ่านไป;
// ก่อนอื่นตรวจสอบให้แน่ใจว่าสามารถเรียกเหตุการณ์แตะครั้งเดียวได้
if (math.abs (starttx - endtx) <6 && math.abs (starttx - endtx) <6) {
// ตรวจสอบให้แน่ใจว่าช่วงเวลาระหว่างสองก๊อกอยู่ภายใน 500 มิลลิวินาที
ถ้า (ระยะเวลา <301) {
// ตำแหน่งของการแตะนี้และตำแหน่งของการแตะสุดท้ายอนุญาตให้เกิดข้อผิดพลาดภายในช่วงที่กำหนด
ถ้า (lasttx! == null &&
Math.Abs (lasttx - endtx) <45 &&
Math.Abs (Lastty - Endty) <45) {
firstTouchend = true;
lasttx = lastty = null;
console.log ('เหตุการณ์การแตะสองครั้ง');
-
-
อื่น{
lasttx = endtx;
lastty = endty;
-
-
อื่น{
firstTouchend = true;
lasttx = lastty = null;
-
เมื่อเวลาผ่านไป = ตอนนี้;
}, เท็จ );
// นิ้วแตะหน้าจอเร็วเกินไปบน iOS Safari
// มีโอกาสบางอย่างที่เหตุการณ์ TouchStart และ Touchend จะไม่ได้รับการตอบกลับเป็นครั้งที่สอง
// ในเวลาเดียวกันการสัมผัสนิ้วจะไม่กระตุ้นการคลิก
if (~ navigator.useragent.toLowerCase (). indexof ('iPhone os')) {
body.addeventListener ('TouchStart', ฟังก์ชั่น (e) {
startTime = date.now ();
}, จริง );
body.addeventListener ('touchend', ฟังก์ชั่น (e) {
var nolongTap = date.now () - เริ่มต้นเวลา <501;
ถ้า (FirstTouchend) {
firstTouchend = false;
if (nolongtap && e.target === องค์ประกอบ) {
dtaptimer = settimeout (function () {
firstTouchend = true;
lasttx = lastty = null;
console.log ('เหตุการณ์การแตะสองครั้ง');
}, 400);
-
-
อื่น{
firstTouchend = true;
-
}, จริง );
// เหตุการณ์คลิกจะไม่ถูกทริกเกอร์เมื่อนิ้วแตะหน้าจอหลายครั้งบน iOS
element.addeventListener ('คลิก', ฟังก์ชั่น (e) {
ถ้า (dtaptimer) {
ClearTimeOut (DTAPTIMER);
dtaptimer = null;
firstTouchend = true;
-
}, เท็จ );
-
เหตุการณ์ longtap
เหตุการณ์ LongTap เป็นเหตุการณ์ที่เกิดขึ้นเมื่อนิ้วถือหน้าจอเป็นเวลานานและยังคงไม่ถูกใจ
การคัดลอกรหัสมีดังนี้:
var starttx, startty, ltaptimer;
element.addeventListener ('TouchStart', ฟังก์ชั่น (e) {
ถ้า (ltaptimer) {
ClearTimeout (ltaptimer);
ltaptimer = null;
-
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
ltaptimer = settimeout (function () {
console.log ('Event Tap Fire Long');
}, 1,000);
E.preventDefault ();
}, เท็จ );
element.addeventListener ('touchmove', ฟังก์ชั่น (e) {
var touches = e.touches [0]
endtx = touches.clientx
endty = touches.clienty;
if (ltaptimer && (math.abs (endtx - starttx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeout (ltaptimer);
ltaptimer = null;
-
}, เท็จ );
element.addeventListener ('touchend', ฟังก์ชั่น (e) {
ถ้า (ltaptimer) {
ClearTimeout (ltaptimer);
ltaptimer = null;
-
}, เท็จ );
เหตุการณ์ปัด
เหตุการณ์การปัดเป็นเหตุการณ์ที่เกิดขึ้นเมื่อนิ้วเลื่อนบนหน้าจอ มันถูกแบ่งออกเป็น swipeleft (ซ้าย), swiperight (ขวา), swipeup (up) และ swipedown (ลง)
การคัดลอกรหัสมีดังนี้:
var istouchmove, starttx, startty;
element.addeventListener ('TouchStart', ฟังก์ชั่น (e) {
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
iStouchMove = FALSE;
}, เท็จ );
element.addeventListener ('touchmove', ฟังก์ชั่น (e) {
istouchMove = true;
E.preventDefault ();
}, เท็จ );
element.addeventListener ('touchend', ฟังก์ชั่น (e) {
if (! isTouchMove) {
กลับ;
-
var touches = e.changedTouches [0]
endtx = touches.clientx
endty = touches.clienty,
dailationx = starttx - endtx
ระยะทาง = Startty - Endty,
iSswipe = false;
if (math.abs (distancex)> = math.abs (distancey)) {
if (distancex> 20) {
console.log ('Fire Swipe Left Event');
iSswipe = true;
-
อื่นถ้า (distancex <-20) {
console.log ('Fire Swipe Right Event');
iSswipe = true;
-
-
อื่น{
ถ้า (ระยะทาง> 20) {
console.log ('Fire Swipe Up Event');
iSswipe = true;
-
อื่นถ้า (ระยะทาง <-20) {
console.log ('Fire Swipe Down Event');
iSswipe = true;
-
-
ถ้า (iSswipe) {
console.log ('Event Fire Swipe');
-
}, เท็จ );
เหตุการณ์ทั้งหมดที่จำลองข้างต้นจะถูกห่อหุ้มใน monoevent ที่อยู่รหัสที่สมบูรณ์: https://github.com/chenmnkken/monoevent เพื่อนที่ต้องการโปรดดู ~
PS: ที่นี่ฉันขอแนะนำเครื่องมือค้นหาออนไลน์เกี่ยวกับเหตุการณ์ JS ซึ่งสรุปประเภทเหตุการณ์ที่ใช้กันทั่วไปและฟังก์ชั่นฟังก์ชั่นของ JS:
รายการเหตุการณ์และฟังก์ชั่น JavaScript ทั้งหมด:
http://tools.vevb.com/table/javascript_event