מכוונים לאן שרוצים

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

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

היו לנו אירועי מגע במשך זמן מה כדי לעזור לנו בעניין הזה, אבל זה ממשק API נפרד לגמרי במיוחד למגע, ויאלץ לקודד שני מודלים נפרדים של אירועים שרוצים לתמוך גם בעכבר וגם במגע. Chrome 55 מגיע עם תקן חדש יותר שמאחד את שני המודלים: אירועי מצביע.

מודל אירועים יחיד

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

document.addEventListener('pointermove',
    ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
    ev => console.log('The pointer is now over foo.'));

הנה רשימה של כל האירועים הזמינים. הרשימה אמורה להיראות לכם די מוכרת, אם אתם מכירים אירועי עכבר:

סוגי קלט שונים

באופן כללי, אירועי מצביע מאפשרים לכתוב קוד באופן שלא תלוי בקלט, בלי שתצטרכו לרשום handlers נפרדים לאירועים עבור מכשירים שונים לקליטת נתונים. כמובן שעדיין תצטרכו להיות מודעים להבדלים בין סוגי הקלט, למשל העיקרון של העברת העכבר חל. אם ברצונך להבדיל בין סוגים שונים של מכשירי קלט – אולי כדי לציין קוד/פונקציונליות נפרדים למקורות קלט שונים. עם זאת, ניתן לעשות זאת בתוך אותם גורמים מטפלים באירועים באמצעות המאפיין pointerType של PointerEvent גרפי. לדוגמה, אם השתמשתם בכתיבת קוד בחלונית ההזזה לניווט צדדית, תוכלו לכלול את הלוגיקה הבאה באירוע pointermove:

switch(ev.pointerType) {
    case 'mouse':
    // Do nothing.
    break;
    case 'touch':
    // Allow drag gesture.
    break;
    case 'pen':
    // Also allow drag gesture.
    break;
    default:
    // Getting an empty string means the browser doesn't know
    // what device type it is. Let's assume mouse and do nothing.
    break;
}

פעולות ברירת המחדל

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

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

document.addEventListener('pointercancel',
    ev => console.log('Go home, the browser is in charge now.'));

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

אפשר למנוע מהדפדפן להשתלט על touch-action נכס CSS. הגדרת הערך none ברכיב כלשהו תשבית את כל האפשרויות פעולות שמוגדרות על ידי הדפדפן התחילו באלמנט הזה. אבל יש כמה ערכים אחרים לשליטה פרטנית יותר, כמו pan-x, כדי לאפשר לדפדפן כדי להגיב לתנועה על ציר ה-X אבל לא על ציר ה-Y. Chrome 55 אפשר להזין את הערכים הבאים:

צילום מצביע

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

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

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

const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
    console.log('Button down, capturing!');
    // Every pointer has an ID, which you can read from the event.
    foo.setPointerCapture(ev.pointerId);
});

foo.addEventListener('pointerup', 
    ev => console.log('Button up. Every time!'));

תמיכה בדפדפנים

נכון למועד הכתיבה, אירועי מצביע נתמכים ב-Internet Explorer 11, Microsoft Edge, Chrome ו-Opera, וגם תמיכה חלקית ב-Firefox. אפשר תוכלו למצוא רשימה עדכנית בכתובת caniuse.com.

אפשר להשתמש ב-polyfill של אירועי המצביע עבור למלא את הפערים האלה. אפשרות אחרת היא לחפש תמיכה של הדפדפן בזמן הריצה פשוט:

if (window.PointerEvent) {
    // Yay, we can use pointer events!
} else {
    // Back to mouse and touch events, I guess.
}

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

אז קדימה, אנחנו מזמינים אותך להתנסות ולספר לנו מה דעתך.