כיצד להשתמש באירועי Pointer ב-JavaScript

טייק אווי מפתח

• יישומי אינטרנט צריכים לתמוך במגוון של התקני קלט, לא רק בעכבר, כדי לתת מענה לקהל רחב יותר.
• אירועי מצביע ב-JavaScript מטפלים באירועי עכבר ומגע, ומבטלים את הצורך ליישם אותם בנפרד.
• לאירועי מצביע יש שמות ופונקציונליות דומים לאירועי עכבר, מה שמקל על עדכון קוד קיים כדי לתמוך בכניסות מגע ועט.

יישומי אינטרנט רבים מניחים שהתקן הצבעה של משתמש יהיה עכבר, ולכן הם משתמשים באירועי עכבר כדי לטפל באינטראקציות. עם זאת, עם עלייתם של מכשירי מסך מגע, משתמשים אינם צריכים עכבר כדי ליצור אינטראקציה עם אתרי אינטרנט. חיוני לתמוך במגוון של התקני קלט כדי לתת מענה לקהל הרחב ביותר האפשרי.

ל-JavaScript יש תקן חדש יותר שנקרא מצביע אירועים. הוא מטפל באירועי עכבר ומגע, כך שאינך צריך לדאוג ליישם אותם בנפרד.

מהם אירועי Pointer?

אירועי מצביע הם תקן אינטרנט המגדיר דרך אחידה לטיפול בשיטות קלט שונות בדפדפן אינטרנט, כולל עכבר, מגע ועט. אירועים אלה מספקים דרך עקבית ובלתי תלויה בפלטפורמה של אינטראקציה עם תוכן אינטרנט במכשירים שונים.

בקצרה, אירועי מצביע עוזרים לך לטפל בקבוצה זו של אינטראקציות משתמש, ללא קשר למקור.

סוגי אירועי מצביע

אירועי מצביע נקראים בדומה לאירועי העכבר שאולי כבר הכרתם. לכל mouseEvent ב-JavaScript, יש תואם pointerEvent. זה אומר שאתה יכול לעיין מחדש בקוד הישן שלך ולהחליף "עכבר" ל"מצביע" כדי להתחיל לתמוך בכניסות מגע ועט.

הטבלה הבאה מציגה את אירועי המצביע השונים בהשוואה לאירועי עכבר:

אתה יכול לראות שיש שלושה אירועי מצביע נוספים ללא אירועי עכבר תואמים. אתה תלמד על אירועים אלה מאוחר יותר.

שימוש ב-Pointer Events ב-JavaScript

אתה יכול להשתמש באירועי מצביע באותו אופן שאתה משתמש באירועי עכבר. כמו רוב הטיפול באירועים, התהליך בדרך כלל עוקב אחר הדפוס הזה:

1. השתמש בבורר DOM להביא אלמנט.
2. משתמש ב addEventListener שיטה, ציין את האירוע שבו אתה מעוניין ופונקציית התקשרות חוזרת.
3. השתמש במאפיינים ובשיטות של הארגומנט של ה-callback, an מִקרֶה לְהִתְנַגֵד.

הנה דוגמה לשימוש באירוע 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}`;
}

בלוק קוד זה מגדיר רכיב יעד ו פונקציית JavaScript לטפל ב pointermove אירוע אז הוא משתמש ב-a מאזין אירועי JavaScript כדי לצרף את אירוע המצביע והפונקציה לאלמנט היעד.

באמצעות קוד זה, אלמנט עם מזהה "מטרה" יציג את קואורדינטות המצביע כאשר תעביר את הסמן, האצבע או העט מעליו:

אתה יכול להשתמש באירועי המצביע האחרים באותו אופן.

אירוע ביטול המצביע

אירוע ה-pointercancel מופעל כאשר אירוע מצביע אחר מופסק לפני שהוא משלים את פעולתו כמתוכנן בתחילה. בדרך כלל, הדפדפן מבטל כל אירוע מצביע שאולי היה בפעולה קודם לכן. ישנן סיבות רבות מדוע א pointercancel אירוע עשוי להפעיל, למשל:

• כאשר משתמש מקבל שיחת טלפון או התראה מפריעה אחרת תוך גרירת אלמנט על פני המסך.
• כאשר כיוון המכשיר משתנה.
• כאשר חלון הדפדפן מאבד מיקוד.
• כאשר המשתמש עובר ללשונית או אפליקציה אחרת.

עם ה 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() שיטה ושחרר לכידת מצביע עם releasepointercapture() שיטה.

ה gotpointercapture ו לכידת נקודות אבודה אירועי מצביע שימושיים ללכידת מצביע.

אירוע gotpointercapture

ה gotpointercapture אירוע מופעל בכל פעם שרכיב זוכה לכידת מצביע. אתה יכול להשתמש באירוע זה כדי לאתחל מצב עבור רכיב ה-HTML שלך כדי לטפל באירועי מצביע. לדוגמה, ביישום ציור, אתה יכול להשתמש gotpointercapture אירוע כדי להגדיר את המיקום ההתחלתי של הסמן.

אירוע לכידת נקודות האבוד

ה לכידת נקודות אבודה אירוע מופעל כאשר רכיב מאבד את לכידת המצביע. אתה יכול להשתמש בו כדי לנקות או להסיר כל מצב שנוצר כאשר האלמנט השיג לכידת מצביע. ביישום ציור, אולי תרצה להשתמש לכידת נקודות אבודה כדי להסתיר את הסמן.

מאפיינים של אירועי Pointer

לאירועי Pointer יש מאפיינים שיעזרו לך להפוך את האתר שלך לאינטראקטיבי ורספונסיבי יותר. המאפיינים של אירועי עכבר הם אותם מאפיינים שתמצאו באירועי מצביע, בתוספת כמה מאפיינים נוספים. מאמר זה מסביר כמה מהמאפיינים הנוספים.

מאפיין ה-pointerId

ה pointerId הוא מאפיין אירוע מצביע שעוזר לך לזהות כל קלט מצביע ייחודי, כגון חרט, אצבע או עכבר. כל קלט מצביע מקבל מזהה ייחודי (נוצר אוטומטית על ידי הדפדפן) שיאפשר לך לעקוב אחריהם ולבצע בהם פעולות.

שימוש נהדר עבור pointerId property הוא אפליקציית משחקים שבה משתמשים בו-זמנית משתמשים במספר אצבעות או סטיילוסים. ה pointerId מאפיין מאפשר לך לעקוב אחר כל משטח מצביע על ידי הקצאת מזהה ייחודי לכל אחד מהם. המזהה הראשי מוקצה לקלט המצביע הראשון.

מאפיין זה שימושי במיוחד עבור מכשירי מגע. התקנים המסתמכים על מצביעי עכבר יכולים לקבל רק קלט מצביע אחד בכל פעם ללא התקן חיצוני כלשהו שמחובר אליהם.

הנה דוגמה פשוטה שמדפיסה את המזהה של כל קלט מצביע לקונסולה:

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 עוזר לך להבחין בין הסוגים השונים של כניסות מצביע ומאפשר לך לבצע פעולות המבוססות עליהם. אתה יכול להבדיל בין עכבר, עט ומגע אצבע. מאפיין זה יכול לקבל רק אחת משלוש כניסות מחרוזות: "עכבר", "עט" או "מגע". הנה דוגמה פשוטה כיצד להשתמש ב- 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 בדפדפנים כאלה.

מקרה שימוש טוב עבור מאפיינים אלה יהיה ביישומים הדורשים קלט מדויק, או צורך להבדיל בין הגדלים של תשומות שונות. לדוגמה, באפליקציית ציור, גובה ורוחב גדולים יותר עשויים לומר שהמשתמש מצייר במהלך רחב יותר ולהיפך.

ברוב הפעמים, סביר להניח שתשתמש במאפייני הרוחב והגובה לאירועי מגע.

השתמש באירועי Pointer ליותר כוללות

אירועי מצביע מאפשרים לך לתת מענה למגוון רחב של מכשירים וסוגי קלט מבלי לעבור הרבה לחץ. אתה תמיד צריך להשתמש בהם ביישומים שלך כדי להתאים לסטנדרטים מודרניים ולעזור לבנות אינטרנט טוב יותר.