ویژگی touch-action CSS به توسعه‌دهنده اجازه می‌دهد تا نحوه تعامل کاربر با یک عنصر را محدود کند که به ویژه برای جلوگیری از ارسال رویدادها در مواقع ضروری مفید است.
قبل از نسخه 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 پیاده‌سازی می‌شد، ساده‌سازی کنند.