מאפיין ה-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.