יכולות הקלט של מכשיר

ב-Chrome 47 יש תכונה חדשה שמאפשרת לכם להבין בקלות רבה יותר איך המשתמשים מקיימים אינטראקציה עם האתר שלכם: InputDeviceCapabilities. נרחיב קצת על הנושא ונראה למה זה חשוב.

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

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

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

ה-API החדש של InputDeviceCapabilities מספק פרטים על המקורות הבסיסיים של אירועי הקלט באמצעות אובייקט sourceCapabilities ב-UIEvent.
לאובייקט יש מאפיין firesTouchEvents שמוגדר כ-true או כ-false, בהתאם לאופן שבו האירוע נוצר על ידי פעולת המשתמש.

השאלה היא: איפה כדאי להשתמש בזה?

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

עם זאת, בתרחישים מסוימים לא כדאי להפעיל את preventDefault באירוע המגע. לדוגמה, עדיין רוצים שהקשות ישלחו אירועי 'קליק' וישנו את המיקוד. במקרים כאלה, המידע שמאוחסן בנכס MouseEvent.sourceCapabilities.firesTouchEvents מאפשר לכם להתחיל לאחד את הלוגיקה של אירועים שמבוססים על מגע ועל עכבר לתוך מודל שדומה לאופן שבו מנהלים את הלוגיקה באמצעות Pointer Events. כלומר, אפשר להשתמש רק בקבוצת קוד אחת שמנהלת את לוגיקת האינטראקציה, ומספקת למפתחים דרך פשוטה יותר לשתף את הלוגיקה בין דפדפנים שתומכים באירועי Pointer Events לבין כאלה שלא תומכים בהם.

function addMouseEventListener(target, type, handler, capture) {  
    target.addEventListener(type, function(e) {  
    if (e.sourceCapabilities.firesTouchEvents)  
        return false;  
    return handler(e);  
    }, capture);  
}

החדשות הטובות הן ש-Rick Byers הוסיף את התמיכה ב-Polyfill, כך שאפשר להשתמש בה ברוב הפלטפורמות.

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