يتضمّن الإصدار 47 من Chrome ميزة جديدة تسهّل فهم كيفية تفاعل المستخدمين مع موقعك الإلكتروني: InputDeviceCapabilities. لنرجع قليلاً ونتعلّم سبب أهمية ذلك.
أحداث إدخال DOM هي نموذج مجرد أعلى أحداث الإدخال ذات المستوى المنخفض، وهي مرتبطة بشكل فضفاض
بإدخال الجهاز المادي (مثل يمكن تشغيل أحداث click باستخدام الماوس أو
شاشة تعمل باللمس أو لوحة مفاتيح). ومع ذلك، هناك مشكلة: لا تتوفّر طريقة بسيطة
للحصول على تفاصيل الجهاز المادي المسؤول عن حدث معيّن.
بالإضافة إلى ذلك، يمكن أن تؤدي أنواع معيّنة من الإدخال إلى إنشاء المزيد من أحداث إدخال DOM "المزيفة" لأسباب تتعلّق بالتوافق. يحدث أحد أحداث DOM المزيّفة هذه عندما ينقر المستخدم على شاشة تعمل باللمس (مثل شاشة هاتف جوّال)، ولا يؤدي ذلك إلى بدء أحداث اللمس فقط، بل يؤدي أيضًا إلى بدء أحداث الماوس لأسباب تتعلق بالتوافق.
ويتسبب ذلك في مشاكل للمطوّرين عند إتاحة استخدام الماوس والإدخال باللمس معًا. من
الصعب معرفة ما إذا كان حدث mousedown يمثّل فعليًا إدخالًا جديدًا من فأرة، أو
هو مجرد حدث توافق لحدث touchstart تمت معالجته سابقًا.
توفّر واجهة برمجة التطبيقات InputDeviceCapabilities الجديدة تفاصيل عن
مصادر أحداث الإدخال الأساسية من خلال عنصر sourceCapabilities في UIEvent.
يحتوي العنصر على سمة firesTouchEvents تم ضبطها على true أو false استنادًا إلى كيفية
إنشاء الحدث من خلال إجراء المستخدم.
السؤال هو: أين يجب استخدام هذه الميزة؟
وبصرف النظر عن أحداث المؤشر، يتعامل العديد من المطوّرين اليوم مع منطق التفاعل في طبقة اللمس، ما يمنع Default من إنشاء أحداث "زائفة" للماوس في المقام الأول.يعمل هذا التصميم بشكل جيد في العديد من السيناريوهات ولا يحتاج إلى التغيير للاستفادة من InputDeviceCapabilities.
ولكن في بعض السيناريوهات، لا تريد حقًا استخدام preventDefault مع حدث اللمس.
على سبيل المثال، لا تزال تريد أن تؤدي النقرات إلى إرسال أحداث "النقر" وتغيير التركيز. في
هذه الحالات، تتيح لك المعلومات المخزّنة في سمة
MouseEvent.sourceCapabilities.firesTouchEvents بدء
توحيد منطق الأحداث المستندة إلى اللمس والماوس في نموذج
مشابه للطريقة التي ستدير بها المنطق باستخدام أحداث المؤشر. وهذا يعني أنّه يمكنك
استخدام مجموعة واحدة فقط من الرموز البرمجية التي تدير منطق التفاعل وتوفّر للمطوّرين
طريقة أبسط لمشاركة المنطق بين المتصفّحات التي تتيح استخدام أحداث المؤشر والمتصفّحات التي لا تتيح ذلك.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
والخبر السار هو أنّه تم ملء هذا المحتوى من قِبل "ريك بيرز" حتى تتمكّن من استخدامه على معظم المنصات.
في الوقت الحالي، هذه الواجهة محدودة وتركز على حلّ مشكلة معيّنة في تحديد أحداث الماوس المستمدة من أحداث اللمس.
من الممكن أيضًا إنشاء مثيل من InputDeviceCapabilities،
ولكنّه لا يحتوي إلا على firesTouchEvents. من المتوقّع أن يتم
توسيع نطاق
هذه الميزة في المستقبل لتمكينك من التعرّف أكثر على جميع أجهزة الإدخال على
نظام المستخدم. يسرّنا معرفة ملاحظاتك بشأن
حالات الاستخدام.