من أجل توفير دعم قوي لواجهات اللمس، توفر أحداث اللمس القدرة على الاستجابة لعمليات المستخدم على شاشة اللمس أو لوحة اللمس.
واجهة TouchEventTouchEvent هو نوع من الأحداث التي تصف تغيرات حالة الأصابع على سطح اللمس (شاشة اللمس، لوحة اللمس، وما إلى ذلك). يُستخدم هذا النوع من الأحداث لوصف نقطة اتصال واحدة أو أكثر، مما يسمح للمطورين باكتشاف حركة نقاط اللمس، وزيادة نقاط اللمس وانخفاضها، وما إلى ذلك. يمثل كل كائن لمس نقطة لمس؛ ويتم وصف كل نقطة لمس حسب موضعها وحجمها وشكلها ومستوى الضغط والعنصر المستهدف. يمثل كائن TouchList قائمة بنقاط اتصال متعددة.
نوع حدث اللمسللتمييز بين تغييرات الحالة المرتبطة باللمس، هناك أنواع متعددة من أحداث اللمس. يمكنك تحديد نوع الحدث الحالي عن طريق التحقق من خاصية TouchEvent.type الخاصة بحدث اللمس.
المبدأ الأساسي هو تسجيل المواضع الإحداثية لبداية الانزلاق (touchStart) والانزلاق النهائي (touchEnd)، ثم حساب الموضع النسبي.
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e ||.event }, touchEnd:function(e){ const that = this; endX = e.changedTouches[0].pageX; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; (الاتجاه) { الحالة 0: console.log (بدون انزلاق)؛ الحالة 1: console.log (أعلى)؛ 3: console.log(left); point : Left, 4: Right, 0: عدم الانزلاق GetSlideDirection:function (startX, startY, endX, endY) { const that = this; 0 // إذا كانت مسافة الانزلاق قصيرة جدًا if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; that angle = that.GetSlideAngle(dx, dy); angle > = -45 && angle < 45) { result = 4 }else if (angle >= 45 && angle < 135) { result = 1 }else if (angle >=.) -135 && angle < -45) { result = 2 } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; result }, // إرجاع الزاوية 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 { border: 1px الصلبة السوداء العرض: 200px الارتفاع : 100 بكسل; كلمة</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> وظيفة التمرير ( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || console.log('beforeScrollTop',beforeScrollTop); .documentElement.scrollTop، delta = afterScrollTop - beforeScrollTop؛ console.log('beforeScrollTop',beforeScrollTop); console.log('afterScrollTop',afterScrollTop); if( delta === 0) return false; false } التمرير(وظيفة(اتجاه) { console.log(direction) });</script></body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.