מאפיין ה-CSS touch-action מאפשר למפתח להגביל את האופן שבו משתמש יכול לבצע אינטראקציה עם אלמנט. המאפיין הזה שימושי במיוחד כדי למנוע שליחת אירועים כשאין צורך בכך.
לפני גרסה 55, ב-Chrome הייתה תמיכה ב-pan-x וב-pan-y, שמגבילים את האפשרות לגלול רכיבים בכיוון אחד.
בסרטון הבא מוצגת דוגמה לאלמנט ללא הגדרת פעולת מגע (בצד ימין), וגם pan-x ו-pan-y (בצד ימין).
ה-CSS של סרטוני הסטרימינג של המסך האמצעי והמסך הימני הוא:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
ב-Chrome 55 נוספו ההרשאות pan-left, pan-right, pan-up ו-pan-down. יש הבדל קל אבל חשוב בהתנהגות של המאפיינים האלה.
המאפיינים האלה מאלצים את המשתמש להתחיל את התנועות בכיוון אחד לפני שהרכיב יגיב. התנועה הזו דומה לתנועה 'משיכה לרענון', שמגיבה רק כשהמשתמש מבצע תנועה למטה במסך.
בסרטון הבא מוצגות הפעולות pan-right ו-pan-down, שבהן צריך להתחיל את התנועות משמאל לימין וממטה למעלה, בהתאמה.
אחרי שמתחילים את התנועה, אפשר להזיז את המצלמה קדימה ואחורה. רק ההוראה הראשונית מושפעת מכך.
בסרטון מוצגת הדוגמה הזו, אבל קל יותר לנסות בעצמכם. תוכלו לעשות זאת בדוגמה הזו.
קוד ה-CSS של ההדגמה הזו הוא:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
הדבר האחרון שקורה בעולם של פעולות מגע הוא הנכס pinch-zoom. זהו מאפיין חדש ב-Chrome 55, שמוסתר מאחורי דגל, וניתן להשתמש בו עם כל אחת מאפשרויות ההזזה (כלומר pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
אם תבצעו צביטה באתר, בדרך כלל תוכלו להגדיל את התצוגה של תוכן הדפים.
הגדרת touch-action תמנע את ההתנהגות הזו, אבל הוספת התכונה 'הגדלה באמצעות צביטה' תפעיל מחדש את ההתנהגות הזו.
בסרטון הזה מוצג ההבדל בין touch-action: pan-x לבין touch-action: pan-x pinch-zoom.
כל המאפיינים האלה אמורים לפשט חלק מהלוגיקה שהמפתחים היו צריכים להטמיע באמצעות pointer-events.