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

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

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

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

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

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

השאלה היא: איפה צריך להשתמש באפשרות הזו?

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

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

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

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

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