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