تعليق: دعم الإدراك المضافة حديثًا لإدخال المستخدم المتقدم في IE10 ، أعط مثالاً: قم بتسجيل عملية نقرة ، ويمكنك معرفة الجهاز الذي ينقره المستخدم الحالي ، سواء كان ذلك بمثابة نقرة إصبع أو نقرة ماوس أو نقرة قلم (سيكون جهاز الكمبيوتر اللوحي قلمًا)
IE10 دعم التعرف المضافة حديثًا لإدخال المستخدم المتقدم ، على سبيل المثال: قم بتسجيل عملية نقرة ، ومن خلال جملة AddEventListener ، يمكنك معرفة الجهاز الذي ينقره المستخدم الحالي ، أو نقرة إصبع ، أو نقرة الماوس أو النقر فوق القلم (سيكون لجهاز الكمبيوتر اللوحي قلمًا).
يمكن للرمز أعلاه تحديد الجهاز الذي تنقصه المستخدم الحالي ، كما أنه يصدر الأحكام من خلال طريقة رد الاتصال E.PointerType. الماوس هو 4 ، القلم هو 3 ، والإصبع هو 2. أما بالنسبة لنوع المعدات ، فسيتم دراستها.
شيء آخر يجب ملاحظته هو أنك تريد إضافة تحديد جهاز الإدخال في JavaScript ، وأحداث طريقة التسجيل مختلفة بعض الشيء.
addeventListener تم إضافة الحدث هو mspointerdown
في IE10 ، لا تتأثر نقرات الأصابع المفضل في التعرف على هذه الأجهزة المختلفة بالنقر على الوظيفة العادية. ومع ذلك ، لا يتعرف IE10 على جهاز إدخال المستخدم فحسب ، بل يدعم أيضًا الكثير من الإيماءات المتقدمة.
فيما يلي عرضًا لدعم الإيماءات المتقدمة IE10
إنشاء كائنات لفتة
الخطوة الأولى في التعامل مع الإيماءات في موقع الويب الخاص بك هي إنشاء كائن الإيماءات.
var mygesture = new msesture () ؛
بعد ذلك ، قدم عنصرًا مستهدفًا للإيماءة. سيؤدي المتصفح إلى إحداث حدث لفتة لهذا العنصر. في الوقت نفسه ، يمكن لهذا العنصر أيضًا تحديد مساحة الإحداثيات للحدث.
elm = document.getElementById (بعض الشيء) ؛
mygesture.target = elm ؛
ElM.AdDeventListener (MSGESTURECHANGE ، GENTERGESTURE) ؛
أخيرًا ، أخبر كائن الإيماءات الذي يشير إلى معالجته أثناء التعرف على الإيماءات.
elm.addeventListener (mspointerddown ، وظيفة (evt) {
// يضيف الماوس الحالي أو القلم أو الاتصال اللمس للتعرف على الإيماءات
mygesture.addpointer (evt.pointerid) ؛
}) ؛
ملاحظة: لا تنس أنك تحتاج إلى استخدام-MS-Touch-action لتكوين العناصر لمنعها من إجراء إجراءات اللمس الافتراضية (على سبيل المثال ، PAN و Zoom) ، وتوفير أحداث المؤشر للإدخال.
التعامل مع أحداث الإيماءاتبمجرد أن يكون لكائن الإيماءة هدفًا صالحًا ويضاف مؤشرًا واحدًا على الأقل ، سيبدأ في تشغيل حدث الإيماءة. يمكن تقسيم أحداث الإيماءات إلى نوعين: الإيماءات الثابتة (على سبيل المثال ، النقر أو الانتظار) والإيماءات الديناميكية (على سبيل المثال ، تقليص وتناوب وينقد).
انقرالتعرف على الإيماءات الأساسية هو النقرات. عند اكتشاف نقرة ، سيتم تشغيل حدث MSTeSURETAP على العنصر المستهدف لكائن الإيماءات. على عكس النقر فوق أحداث ، انقر فوق الإيماءات لا يمكن تشغيلها إلا عندما يلمس المستخدم أو يضغط على زر الماوس أو يستخدم قلمًا للمس دون تحريك. عادة ما يكون هذا مفيدًا جدًا إذا كنت ترغب في التمييز بين عناصر النقر فوق المستخدم وسحبها.
مطبعة طويلةتشير لفتة الضغط الطويلة إلى تشغيل المستخدم الذي يلمس الشاشة بإصبع واحد ويحملها للحظة ورفعها دون تحريكها. خلال التفاعل الطويل الصحافة ، سيتم إطلاق حدث MSTESTUREHORD عدة مرات لتلقي مختلف حالات الإيماءة:
element.adDeventListener ("MSTEGEROURHERD" ، مقبض) ؛
وظيفة المقبض (EVT) {
if (evt.detail & evt.msgesture_flag_begin) {
// ابدأ إشارات بداية لفتة. بالنسبة لإيماءة الحجز ، هذا يعني أن المستخدم قد تمسك لفترة طويلة بما يكفي في مكان أن تصبح الإيماءة بمثابة مكبس ومعقد كامل إذا تم رفع الإصبع.
}
if (evt.detail & evt.msgesture_flag_end) {
// نهاية يشير إلى نهاية لفتة.
}
if (evt.detail & evt.msgesture_flag_cancel) {
// إلغاء الإشارات بدأ المستخدم الإيماءة ولكنه ألغىها. للاحتفاظ ، يحدث هذا عندما يسحب المستخدم قبل الرفع. يتم إرسال هذا العلم مع علامة النهاية ، مما يشير إلى إكمال التعرف على الإيماءات.
}
}
الإيماءات الديناميكية (الانكماش والدوران والتمرير والسحب)
سيتم الإبلاغ عن الإيماءات الديناميكية (على سبيل المثال ، تقلص أو الدوران) في شكل تحول ، يشبه إلى حد بعيد التحول CSS 2D. يمكن أن تؤدي الإيماءات الديناميكية إلى ثلاثة أحداث: MSGESTURESTART ، MSTESTURECHANGE (المشغلات المتكررة مع استمرار الإيماءة) ، و MSGESTUREEND. يحتوي كل حدث على معلومات حول التحجيم (تقلص) ، الدوران ، التحويل ، والسرعة.
نظرًا لأنه يتم الإبلاغ عن الإيماءات الديناميكية في التحويلات ، فسيكون من السهل جدًا استخدام MSTESURE مع تحويلات CSS 2D لمعالجة عناصر مثل الصور أو الألغاز. على سبيل المثال ، يمكنك تمكين العناصر القياسية والدورة والسحب بالطرق التالية:
TargetElement.AdDeventListener ("MSGESTURECHANGE" ، MenipulateElement) ؛
وظيفة التلاعب (هـ) {
// Unfomment الكود التالي إذا كنت ترغب في تعطيل الجمود المدمج الذي يوفره التعرف على الإيماءات الديناميكية
// if (
// يعود؛
var m = mscssmatrix جديد (e.target.style.transform) ؛ // احصل على أحدث تحويل CSS على العنصر
e.target.style.transform = m
.Translate (E.Offsetx ، E.Offsety) // حرك الأصل التحويلي تحت مركز الإيماءة
.rotate (e.rotation * 180 / math.pi) // تطبيق الدوران
.scale (E.Scale) // تطبيق مقياس
.Translate (E.Translationx ، E.Translationy) // تطبيق الترجمة
.translate (-e.offsetx ، -e.offsety) ؛ // حرك الأصل التحويلي مرة أخرى
}
يمكن أن تدعم الإيماءات الديناميكية مثل التكبير والدوران عمليات الماوس ، والتي يمكن تحقيقها باستخدام معدلات CTRL أو Shift على التوالي أثناء تدوير عجلة الماوس.