מאפיין ה-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. זהו נכס חדש בגרסה 55 של Chrome, שעומד מאחורי דגל, שניתן להשתמש בו עם כל אחת מאפשרויות ההזזה (כלומר 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.