เพื่อให้การสนับสนุนที่แข็งแกร่งสำหรับอินเทอร์เฟซแบบสัมผัส กิจกรรมการสัมผัสจะให้ความสามารถในการตอบสนองต่อการทำงานของผู้ใช้บนหน้าจอสัมผัสหรือทัชแพด
อินเตอร์เฟซ กิจกรรมสัมผัสTouchEvent เป็นเหตุการณ์ประเภทหนึ่งที่อธิบายการเปลี่ยนแปลงสถานะของนิ้วบนพื้นผิวสัมผัส (หน้าจอสัมผัส ทัชแพด ฯลฯ) เหตุการณ์ประเภทนี้ใช้เพื่ออธิบายจุดสัมผัสหนึ่งจุดขึ้นไป ช่วยให้นักพัฒนาสามารถตรวจจับการเคลื่อนไหวของจุดสัมผัส การเพิ่มขึ้นและลดลงของจุดสัมผัส ฯลฯ วัตถุ Touch แต่ละรายการแสดงถึงจุดสัมผัส แต่ละจุดสัมผัสจะอธิบายตามตำแหน่ง ขนาด รูปร่าง ระดับแรงกด และองค์ประกอบเป้าหมาย วัตถุ TouchList แสดงรายการจุดสัมผัสหลายจุด
ประเภทของเหตุการณ์สัมผัสเพื่อแยกความแตกต่างระหว่างการเปลี่ยนแปลงสถานะที่เกี่ยวข้องกับการสัมผัส มีเหตุการณ์การสัมผัสหลายประเภท คุณสามารถกำหนดประเภทของเหตุการณ์ปัจจุบันได้โดยการตรวจสอบคุณสมบัติ TouchEvent.type ของเหตุการณ์การสัมผัส
หลักการพื้นฐานคือการบันทึกตำแหน่งพิกัดของการเลื่อนสตาร์ท (touchStart) และการเลื่อนตอนท้าย (touchEnd) จากนั้นคำนวณตำแหน่งสัมพัทธ์
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e ||. }, touchEnd:function(e){ const that = นี้; endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; ให้ทิศทาง = that.GetSlideDirection(startX, startY, endX, endY); (ทิศทาง) { กรณีที่ 0: console.log (ไม่เลื่อน); กรณีที่ 1: console.log (ขึ้น); กรณีที่ 2: console.log (ลง); 3: console.log(left); กรณีที่ 4: console.log(right); break; default: break; } },// ทิศทางการกลับ 1: ขึ้น, 2: ลง, 3 ตามจุดเริ่มต้นและจุดสิ้นสุด จุด : ซ้าย, 4: ขวา, 0: ไม่เลื่อน GetSlideDirection:function (startX, startY, endX, endY) { const that = this; ให้ dy = startY - endY; ให้ dx = endX - startX; 0; // ถ้าระยะการเลื่อนสั้นเกินไป if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } ให้ angle = that.GetSlideAngle(dx, dy); มุม > = -45 && มุม < 45) { result = 4; }else if (มุม >= 45 && angle < 135) { result = 1; }else if (มุม >= -135 && มุม < -45) { ผลลัพธ์ = 2; } else if ((มุม >= 135 && มุม <= 180) || (มุม >= -180 && มุม < -135)) { ผลลัพธ์ = 3; ผลลัพธ์; }, // คืนค่ามุม GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI; วิธี JS ดั้งเดิมนอกจากวิธีการใหม่ใน H5 แล้ว คุณยังสามารถใช้ JS ดั้งเดิมเพื่อกำหนดทิศทางการเลื่อนของมุมมองได้ โค้ดมีดังนี้ (สามารถเรียกใช้ได้โดยตรง):
โปรดทราบว่า Chrome จะตั้งค่า document.body.scrollTop เป็น 0 เสมอ และจำเป็นต้องเปลี่ยนเป็น document.documentElement.scrollTop
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { เส้นขอบ: 1px สีดำทึบ; ความกว้าง: 200px; : 100px; overflow: scroll; } </style></head><body style=overflow: scroll><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1> <h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1> <h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1> <h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1> <h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1><h1>สวัสดี คำ</h1> <h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><h1>สวัสดีคำ</h1><script> ฟังก์ชัน scroll( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; console.log('beforeScrollTop',beforeScrollTop); window.addEventListener(เลื่อน, ฟังก์ชั่น() { var afterScrollTop = document .documentElement.scrollTop, เดลต้า = afterScrollTop - beforeScrollTop; console.log('beforeScrollTop',beforeScrollTop); console.log('afterScrollTop',afterScrollTop); ถ้า( เดลต้า === 0 ) กลับเท็จ; fn( เดลต้า > 0 ? ลง : ขึ้น ); false); } scroll(function(direction) { console.log(direction) });</script></body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network