كيفية استخدام أحداث المؤشر في جافا سكريبت

الماخذ الرئيسية

• يجب أن تدعم تطبيقات الويب نطاقًا واسعًا من أجهزة الإدخال، وليس الماوس فقط، لتلبية احتياجات جمهور أوسع.
• تتعامل أحداث المؤشر في JavaScript مع أحداث الماوس واللمس، مما يلغي الحاجة إلى تنفيذها بشكل منفصل.
• تحتوي أحداث المؤشر على أسماء ووظائف مشابهة لأحداث الماوس، مما يجعل من السهل تحديث التعليمات البرمجية الموجودة لدعم إدخالات اللمس والقلم.

تفترض العديد من تطبيقات الويب أن جهاز التأشير الخاص بالمستخدم سيكون ماوسًا، لذلك يستخدمون أحداث الماوس للتعامل مع التفاعلات. ومع ذلك، مع ظهور الأجهزة التي تعمل باللمس، لا يحتاج المستخدمون إلى الماوس للتفاعل مع مواقع الويب. من الضروري دعم مجموعة من أجهزة الإدخال لتلبية احتياجات أكبر عدد ممكن من الجمهور.

لدى جافا سكريبت معيار أحدث يسمى أحداث المؤشر. فهو يتعامل مع أحداث الماوس واللمس، لذلك لا داعي للقلق بشأن تنفيذها بشكل منفصل.

ما هي أحداث المؤشر؟

أحداث المؤشر هي معيار ويب يحدد طريقة موحدة للتعامل مع طرق الإدخال المختلفة في متصفح الويب، بما في ذلك الماوس واللمس والقلم. توفر هذه الأحداث طريقة متسقة ومستقلة عن النظام الأساسي للتفاعل مع محتوى الويب عبر الأجهزة المختلفة.

باختصار، تساعدك أحداث المؤشر على التعامل مع هذه المجموعة من تفاعلات المستخدم، بغض النظر عن المصدر.

أنواع أحداث المؤشر

تتم تسمية أحداث المؤشر بشكل مشابه لأحداث الماوس التي قد تكون على دراية بها بالفعل. لكل mouseEvent في جافا سكريبت، هناك ما يقابل ذلك pointerEvent. وهذا يعني أنه يمكنك إعادة النظر في التعليمات البرمجية القديمة الخاصة بك وتبديل "الماوس" إلى "المؤشر" لبدء دعم مدخلات اللمس والقلم.

يوضح الجدول التالي أحداث المؤشر المختلفة مقارنة بأحداث الماوس:

يمكنك أن ترى أن هناك ثلاثة أحداث مؤشر إضافية دون أحداث الماوس المقابلة. ستتعرف على هذه الأحداث لاحقًا.

استخدام أحداث المؤشر في JavaScript

يمكنك استخدام أحداث المؤشر بنفس الطريقة التي تستخدم بها أحداث الماوس. مثل معظم التعامل مع الأحداث، تتبع العملية عادة هذا النمط:

1. استخدم محدد DOM لجلب عنصر.
2. باستخدام addEventListener الطريقة، حدد الحدث الذي يهمك ووظيفة رد الاتصال.
3. استخدم خصائص وأساليب وسيطة رد الاتصال، وهي حدث هدف.

فيما يلي مثال باستخدام حدث pointermove:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

تحدد كتلة التعليمات البرمجية هذه العنصر المستهدف و وظيفة جافا سكريبت للتعامل مع com.pointermove الحدث ثم يستخدم a مستمع أحداث جافا سكريبت لإرفاق حدث المؤشر والوظيفة بالعنصر الهدف.

باستخدام هذا الرمز، سيعرض العنصر ذو معرف "الهدف" إحداثيات المؤشر عند تحريك المؤشر أو الإصبع أو القلم فوقه:

يمكنك استخدام أحداث المؤشر الأخرى بنفس الطريقة.

حدث إلغاء المؤشر

يتم تشغيل حدث pointercancel عند مقاطعة حدث مؤشر آخر قبل أن يكمل عمله كما كان مقصودًا في البداية. عادةً ما يقوم المتصفح بإلغاء أي حدث مؤشر قد يكون قيد التنفيذ من قبل. هناك العديد من الأسباب التي تجعل أ com.pointercancel قد يتم تشغيل الحدث، على سبيل المثال:

• عندما يتلقى المستخدم مكالمة هاتفية أو بعض الإشعارات الأخرى المتقطعة أثناء سحب عنصر عبر الشاشة.
• عندما يتغير اتجاه الجهاز.
• عندما تفقد نافذة المتصفح التركيز.
• عندما يتحول المستخدم إلى علامة تبويب أو تطبيق آخر.

مع ال com.pointercancel الحدث، يمكنك التعامل مع هذه المواقف كيفما تريد. هنا مثال:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

التقاط المؤشر

يعد التقاط المؤشر ميزة تتيح لك تحديدًا ما عنصر HTML التقاط جميع أحداث المؤشر الخاصة بمؤشر معين والرد عليها، حتى لو حدثت تلك الأحداث خارج حدود العنصر.

يمكنك تعيين التقاط المؤشر لعنصر باستخدام ملحق setpointercapture() طريقة وتحرير التقاط المؤشر باستخدام ريليسبوينتيركابتشر () طريقة.

ال com.gotpointercapture و Lostpointercapture أحداث المؤشر مفيدة لالتقاط المؤشر.

حدث gotpointercapture

ال com.gotpointercapture يتم تشغيل الحدث عندما يحصل عنصر على التقاط المؤشر. يمكنك استخدام هذا الحدث لتهيئة حالة عنصر HTML الخاص بك للتعامل مع أحداث المؤشر. على سبيل المثال، في تطبيق الرسم، يمكنك استخدامه com.gotpointercapture حدث لتعيين الموضع الأولي للمؤشر.

حدث Lostpointercapture

ال Lostpointercapture يتم تشغيل الحدث عندما يفقد أحد العناصر التقاط المؤشر. يمكنك استخدامه لتنظيف أو إزالة أي حالة تم إنشاؤها عندما حصل العنصر على التقاط المؤشر. في تطبيق الرسم، قد ترغب في استخدامه Lostpointercapture لإخفاء المؤشر.

خصائص أحداث المؤشر

تحتوي أحداث المؤشر على خصائص ستساعدك على جعل موقع الويب الخاص بك أكثر تفاعلية واستجابة. خصائص أحداث الماوس هي نفس الخصائص التي ستجدها في أحداث المؤشر، بالإضافة إلى بعض الخصائص الإضافية. تشرح هذه المقالة بعض الخصائص الإضافية.

خاصية معرف المؤشر

ال معرف المؤشر هي خاصية حدث المؤشر التي تساعدك على تحديد كل إدخال فريد للمؤشر، مثل القلم أو الإصبع أو الماوس. يحصل كل إدخال للمؤشر على معرف فريد (يتم إنشاؤه تلقائيًا بواسطة المتصفح) والذي سيسمح لك بتتبع العمليات وتنفيذها عليها.

فائدة عظيمة لل معرف المؤشر الملكية هي تطبيق ألعاب حيث يستخدم المستخدمون أصابع أو أقلام متعددة في وقت واحد. ال معرف المؤشر تسمح لك الخاصية بتتبع كل سطح مؤشر عن طريق تعيين معرف فريد لكل منها. يتم تعيين المعرف الأساسي لإدخال المؤشر الأول.

هذه الخاصية مفيدة بشكل خاص للأجهزة التي تعمل باللمس. يمكن أن تحتوي الأجهزة التي تعتمد على مؤشرات الماوس على إدخال مؤشر واحد فقط في كل مرة دون توصيل أي جهاز خارجي بها.

فيما يلي مثال بسيط يطبع معرف كل مؤشر يدخل إلى وحدة التحكم:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

خاصية نوع المؤشر

تساعدك الخاصية pointerType على التمييز بين الأنواع المختلفة لمدخلات المؤشر وتتيح لك تنفيذ العمليات بناءً عليها. يمكنك التفريق بين الماوس والقلم واللمس بالإصبع. يمكن أن تأخذ هذه الخاصية واحدًا فقط من مدخلات السلسلة الثلاثة: "الماوس" أو "القلم" أو "اللمس". فيما يلي مثال بسيط لكيفية استخدام pointerType ملكية:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

خصائص العرض والارتفاع

تمثل هذه الخصائص عرض وارتفاع منطقة اتصال المؤشر بالملليمتر. بعض المتصفحات لا تدعمها، وستكون قيمتها دائمًا 1 في هذه المتصفحات.

ستكون حالة الاستخدام الجيد لهذه الخصائص في التطبيقات التي تتطلب مدخلات دقيقة، أو تحتاج إلى التمييز بين أحجام المدخلات المختلفة. على سبيل المثال، في تطبيق الرسم، قد يعني الارتفاع والعرض الأكبر أن المستخدم يرسم بحدود أوسع والعكس صحيح.

في أغلب الأحيان، من المحتمل أن تستخدم خصائص العرض والارتفاع لأحداث اللمس.

استخدم أحداث المؤشر لمزيد من الشمولية

تسمح لك أحداث المؤشر بتلبية مجموعة واسعة من الأجهزة وأنواع الإدخال دون التعرض للكثير من الضغط. يجب عليك دائمًا استخدامها في تطبيقاتك لتتوافق مع المعايير الحديثة وللمساعدة في بناء شبكة ويب أفضل.