أنت والمستخدمون تريدون تطبيقات ويب متوافقة مع الأجهزة الجوّالة تستجيب لللمس وتتيح الانتقال بسلاسة. من المفترض أن يكون تطويرها سهلًا، ولكن للأسف، فإنّ كيفية تفاعل متصفحات الويب المتوافقة مع الأجهزة الجوّالة مع أحداث اللمس أثناء الانتقال للأعلى أو للأسفل تُعتبر تفاصيل تنفيذ في مواصفات TouchEvent. نتيجةً لذلك، يمكن تقسيم الأساليب تقريبًا إلى 4 فئات. يكشف هذا الموقف عن تعارض أساسي بين توفير سلاسة الانتقال للأعلى أو للأسفل ومحاولة المطوّر الحفاظ على التحكّم.
أربعة نماذج مختلفة لمعالجة أحداث اللمس؟
تنقسم الاختلافات في السلوك بين المتصفّحات إلى أربعة نماذج.
المعالجة العادية للأحداث المتزامنة
يتم إرسال أحداث Touchmove أثناء الانتقال للأعلى أو للأسفل، ويتم حظر كل تعديل للانتقال للأعلى أو للأسفل إلى أن تكتمل معالجة Touchmove. وهذا أمر جيد لأنّه أبسط طريقة للفهم والأكثر فعالية، ولكنّه سيء لأداء الانتقال إلى أعلى أو أسفل الصفحة لأنّه يعني أنّ كل إطار أثناء الانتقال إلى أعلى أو أسفل الصفحة يجب أن يتم حظره في سلسلة المهام الرئيسية.
المتصفّحات: متصفّح Android (Android 4.0.4 و4.3)، وSafari للأجهزة الجوّالة (عند الانتقال للأعلى أو للأسفل في div)
معالجة touchmove غير المتزامنة
يتم إرسال أحداث Touchmove أثناء الانتقال للأعلى أو للأسفل، ولكن يمكن أن يستمر الانتقال بشكل غير متزامن (يتم تجاهل حدث Touchmove بعد بدء الانتقال للأعلى أو للأسفل). ويمكن أن يؤدي ذلك إلى "المعالجة المزدوجة" للأحداث، على سبيل المثال، مواصلة الانتقال للأعلى أو للأسفل بعد أن ينفّذ الموقع الإلكتروني إجراءً باستخدام حدث touchmove ويطلب preventDefault في الحدث، ما يطلب من المتصفّح عدم معالجته.
المتصفّحات: Safari للأجهزة الجوّالة (عند الانتقال للأعلى أو للأسفل في "المستند")، Firefox
إيقاف Touchmove أثناء التمرير
لا يتم إرسال أحداث Touchmove بعد بدء الانتقال للأعلى أو للأسفل ولا تتم استعادتها إلا بعد حدث Touchend. في هذا النموذج، من الصعب التمييز بين لمسة ثابتة وحركة التمرير.
المتصفّحات: متصفّح Samsung (أحداث mousemove المُرسَلة)
Touchcancel عند بدء الانتقال للأعلى أو للأسفل
لا يمكنك الحصول على كلتا الطريقتَين، أي سلاسة الانتقال على الصفحة وإمكانية التحكّم في المطوّر، ويوضّح هذا النموذج المفاضلة بين الانتقال السلس على الصفحة ومعالجة الأحداث، على غرار الدلالات الواردة في مواصفات Pointer Events. لا يمكن استخدام بعض الميزات التي قد تتطلّب تتبُّع إصبع المستخدم، مثل ميزة "السحب لإعادة التحميل".
المتصفّحات: Chrome Desktop M32 والإصدارات الأحدث، Chrome لنظام Android
ما هي أسباب هذا التغيير؟
يستخدم Chrome لنظام التشغيل Android حاليًا النموذج القديم من Chrome: touchcancel عند بدء التمرير ، ما يُحسِّن أداء التمرير، ولكنّه يؤدي إلى إرباك المطوّرين. وعلى وجه التحديد، لا يدرك بعض المطوّرين حدث touchcancel أو كيفية التعامل معه، ما أدّى إلى تعطُّل بعض المواقع الإلكترونية. والأهم من ذلك، أنّه من الصعب أو المستحيل تنفيذ مجموعة كاملة من تأثيرات وسلوكيات الانتقال في واجهة المستخدم، مثل السحب لإعادة التحميل والأشرطة المخفية ونقاط الالتقاط بشكلٍ جيد.
بدلاً من إضافة ميزات مبرمَجة بشكلٍ محدد لتفعيل هذه التأثيرات، يهدف Chrome إلى التركيز على إضافة عناصر أساسية للمنصة تتيح للمطوّرين تنفيذ هذه التأثيرات مباشرةً. اطّلِع على منصّة ويب منطقية للاطّلاع على عرض عام لهذه الفلسفة.
النموذج الجديد في Chrome: نموذج Touchmove غير المتزامن والمحدود
يقدّم Chrome سلوكًا جديدًا
مصمّمًا لتحسين التوافق مع الرموز البرمجية المكتوبة للمتصفّحات الأخرى عند
الانتقال للأعلى أو للأسفل، بالإضافة إلى تفعيل سيناريوهات أخرى تعتمد على تلقّي أحداث
touchmove أثناء الانتقال للأعلى أو للأسفل. تكون هذه الميزة مفعّلة تلقائيًا ويمكنك إيقافها
باستخدام العلامة التالية، chrome://flags\#touch-scrolling-mode.
في ما يلي السلوك الجديد:
- يتم إرسال الحدث الأول لتحريك اللمس بشكل متزامن للسماح بإلغاء الانتقال للأعلى أو للأسفل.
- أثناء الانتقال السريع للأسفل أو للأعلى
- يتم إرسال أحداث touchmove بشكل غير متزامن.
- يتم الحد من عددها إلى حدث واحد كل 200 ملي ثانية، أو إذا تم تجاوز منطقة الانحراف 15 بكسل في CSS
- القيمة Event.cancelable هي false
- بخلاف ذلك، يتم تنشيط أحداث touchmove بشكل متزامن كالمعتاد عند انتهاء التمرير النشط أو عدم إمكانية التمرير إلى أعلى أو أسفل الصفحة لأنّه تم بلوغ الحد الأقصى المسموح به.
- يحدث حدث touchend دائمًا عندما يرفع المستخدم إصبعه.
يمكنك تجربة هذا الإصدار التجريبي في Chrome لأجهزة Android وتفعيل علامة
chrome://flags\#touch-scrolling-mode لمعرفة الفرق.
يسرنا أن نعرف رأيك
يمكن أن يؤدي نموذج Async Touchmove إلى تحسين ملف تعريف التوافق مع جميع المتصفّحات وتفعيل فئة جديدة من تأثيرات إيماءات اللمس. يهمّنا معرفة رأي المطوّرين ورؤية الأعمال الإبداعية التي يمكنهم إجراؤها باستخدامها.