التعليق: يتم تحقيق معظم التفاعلات على الهواتف المحمولة من خلال Touch ، لذلك بالنسبة لمواقع الويب التفاعلية الشاشة التي تعمل باللمس ، تعد أحداث اللمس مهمة للغاية. هنا نقدم العديد من أحداث اللمس التي تحظى بشعبية أكثر. يمكنك اختبار هذا الحدث في معظم المتصفحات الحديثة. يمكن للأصدقاء المهتمين التعرف على ذلك.
مقدمةما هو الفرق بين موقع الشاشة التي تعمل باللمس وموقع الكمبيوتر التقليدي؟ التغييرات في طرق التفاعل هي الأولى التي تتأثر. على سبيل المثال ، يكون حدث النقر الذي نستخدمه في كثير من الأحيان عاجزًا جدًا تحت أجهزة الشاشة التي تعمل باللمس.
يتم تحقيق معظم التفاعلات على الهاتف المحمول من خلال Touch ، لذلك تعد أحداث اللمس مهمة جدًا لمواقع الويب التفاعلية ذات الشاشات التي تعمل باللمس.
قدمت شركة Apple API API في iOS 2.0 ، ويقوم Android بالركب مع معيار الحقيقة لتضييق الفجوة. في الآونة الأخيرة ، تعمل مجموعة عمل W3C معًا لصياغة قاعدة حدث اللمس هذه.
مواصفة
هنا نقدم العديد من أحداث اللمس التي تحظى بشعبية أكثر. يمكنك اختبار هذا الحدث في معظم المتصفحات الحديثة (يجب أن يكون جهاز شاشة تعمل باللمس):
TouchStart: يتم تشغيله عندما تبدأ اللمس
Touchmove: يتم تشغيله عندما تنزلق الإصبع على الشاشة
اللمس: يتم تشغيله عندما تنتهي اللمس
يتضمن كل حدث لمسة ثلاث قوائم تعمل باللمس ، تحتوي كل قائمة على سلسلة مقابلة من نقاط اللمس (تستخدم لتنفيذ اللمسات المتعددة):
اللمسات: قائمة بجميع الأصابع الموجودة حاليًا على الشاشة.
TargetTouches: قائمة الأصابع الموجودة على عنصر DOM الحالي.
تم تغييرها: قائمة الأصابع التي تنطوي على الحدث الحالي.
تحتوي كل نقطة اتصال على معلومات اللمس التالية (شائعة الاستخدام):
المعرف: القيمة التي تحدد بشكل فريد الإصبع الحالي في جلسة اللمس. بشكل عام ، يبدأ رقم التدفق من 0 (Android4.1 ، UC)
الهدف: عنصر DOM ، هو الهدف الذي يستهدفه الإجراء.
pagex/pagex/clientx/clienty/screenx/screeny: قيمة ، حيث تحدث الإجراء على الشاشة (تحتوي الصفحة على مسافة التمرير ، لا تحتوي العميل على مسافة التمرير ، وتستند الشاشة على الشاشة).
RADIUSX/RADIUSY/RONTINALLANGE: ارسم القطع الناقص تقريبًا ما يعادل شكل إصبع ، وزاوية نصف قطر وزاوية الدوران على التوالي. لا يدعمه متصفح الاختبار الأولي ، ولكن لحسن الحظ ، لا تستخدم الوظائف بشكل شائع ، لذلك كل شخص مرحب به في التعليقات.
مع هذه المعلومات ، يمكننا تزويد المستخدمين بتعليقات مختلفة بناءً على معلومات الحدث هذه.
أدناه ، سأعرض لك تجريبيًا صغيرًا وأصبع واحد باستخدام TouchMove:
/*اسحب بإصبع واحد*/
var obj = document.getElementById ('id') ؛
obj.addeventListener ('touchmove' ، وظيفة (حدث) {
// إذا كان هناك إصبع واحد فقط في موضع هذا العنصر
if (event.targetTouches.length == 1) {
Event.PreventDefault () ؛ // حظر الحدث الافتراضي للمتصفح ، مهم
var touch = event.targetTouches [0] ؛
// ضع العنصر الذي يكون فيه إصبعك
obj.style.left = touch.pagex-50 + 'px' ؛
obj.style.top = touch.pagey-50 + 'px' ؛
}
}، خطأ شنيع)؛
نصائح على الفئات الأربع الزائفة من علامة في أجهزة الشاشة التي تعمل باللمس:
نعلم جميعًا أن الفئات الأربع الزائفة من رابط العلامة ، وزيارة ، ونشط ، وحوم مصممة لأحداث النقر ، لذلك حاول عدم استخدامها في مواقع الشاشة التي تعمل باللمس. معظم الاختبارات غير متوفرة أيضا. ولكن هنا خدعة صغيرة عن التحويم. عند النقر فوق زر ، سيبقى الزر في حالة التحويم. في هذا الوقت ، تعمل CSS التي قمت بتعيينها بناءً على هذه الفئة الزائفة أيضًا حتى تنقر على زر آخر بإصبعك ، وسيتم نقل حالة التحويم إلى زر آخر. باستخدام هذا يمكننا جعل بعض الآثار الصغيرة. هذه الخدعة لا تزال متوفرة في معظم المتصفحات.
المثل العليا ممتلئة ، الواقع نحيف!
على الرغم من أن W3C جاهزة لللمس متعدد ، للأسف ، تدعم عدد قليل من المتصفحات ميزات متعددة اللمس ، وخاصة المتصفحات على منصات Android ، مما يجعل قائمة الإصبع التي تم تقديمها أعلاه محادثة فارغة. سيؤدي التقاط نقطتين للمس بشكل مباشر إلى فشل اللمس! لحسن الحظ ، يمكن لمتصفح Safari الذي يأتي مع أجهزة iOS دعم هذه الميزة ، مما يجعلنا مليئين بالأمل في المستقبل. بعد كل شيء ، لقد تم سجننا من خلال عملية واحدة من الماوس لفترة طويلة. كم هو مثير لاستخدام موقع ويب أكثر!