شما و کاربرانتان برنامه‌های وب موبایلی را می‌خواهید که با لمس کردن واکنش نشان می‌دهند و به آرامی حرکت می‌کنند. توسعه آنها باید آسان باشد، اما، متأسفانه، نحوه واکنش مرورگرهای وب تلفن همراه به رویدادهای لمسی در حین پیمایش به عنوان جزئیات پیاده سازی در مشخصات TouchEvent باقی مانده است. در نتیجه، رویکردها را می توان تقریباً به 4 دسته تقسیم کرد. این وضعیت تنش اساسی بین ارائه نرمی اسکرول و حفظ کنترل توسعه دهنده را آشکار می کند.
چهار مدل مختلف پردازش رویداد لمسی؟
تفاوت های رفتاری بین مرورگرها به چهار مدل تقسیم می شود.
پردازش رویداد همزمان معمولی
رویدادهای Touchmove در حین پیمایش ارسال می‌شوند و هر به‌روزرسانی پیمایش مسدود می‌شود تا زمانی که کنترل حرکت لمسی کامل شود. این به عنوان ساده‌ترین و قدرتمندترین اما برای عملکرد اسکرول خوب است، زیرا به این معنی است که هر فریم در حین پیمایش باید روی رشته اصلی مسدود شود.
مرورگرها: مرورگر اندروید (اندروید 4.0.4، 4.3)، سافاری موبایل (هنگام پیمایش div)
پردازش حرکت لمسی ناهمزمان
رویدادهای Touchmove در حین پیمایش ارسال می‌شوند، اما پیمایش می‌تواند به صورت ناهمزمان ادامه یابد (رویداد حرکت لمسی پس از شروع پیمایش نادیده گرفته می‌شود). این امر می‌تواند منجر به «مقابله مضاعف» رویدادها شود، به‌عنوان مثال، ادامه پیمایش پس از اینکه وب‌سایت کاری با حرکت لمسی انجام داد و preventDefault را در رویداد فراخوانی کرد و به مرورگر می‌گفت که آن را مدیریت نکند.
مرورگرها: Mobile Safari (هنگام پیمایش سند)، فایرفاکس
حرکت لمسی هنگام پیمایش متوقف شد
رویدادهای Touchmove پس از شروع پیمایش ارسال نمی‌شوند و تا پس از رویداد لمسی از سر نمی‌گیرند. در این مدل، تشخیص تفاوت بین لمس ثابت و اسکرول سخت است.
مرورگرها: مرورگر سامسونگ (رویدادهای انتقال ماوس ارسال شد)
در شروع پیمایش لغو را لمس کنید
شما نمی توانید آن را به هر دو صورت داشته باشید - صافی پیمایش و کنترل توسعه دهنده - و این مدل، مبادله بین پیمایش صاف و مدیریت رویداد را روشن می کند، شبیه به معنایی مشخصات رویدادهای اشاره گر . برخی از تجربیاتی که ممکن است نیاز به ردیابی انگشت داشته باشند، مانند کشیدن برای تازه کردن، ممکن نیست.
مرورگرها: Chrome Desktop M32+، Chrome Android
چرا تغییر؟
Chrome for Android در حال حاضر از مدل قدیمی Chrome استفاده می‌کند: لغو لمسی در شروع پیمایش، که عملکرد اسکرول را افزایش می‌دهد، اما منجر به سردرگمی توسعه‌دهندگان می‌شود. به طور خاص، برخی از توسعه دهندگان از رویداد لغو لمس یا نحوه برخورد با آن آگاه نیستند و این باعث شکستن برخی از وب سایت ها شده است. مهمتر از آن، یک کلاس کامل از افکت‌ها و رفتارهای پیمایش UI، مانند pull-to-refresh ، hidey bars ، و Snap points ، به خوبی پیاده‌سازی آنها دشوار یا غیرممکن است.
به‌جای افزودن ویژگی‌های رمزگذاری‌شده خاص برای پشتیبانی از این جلوه‌ها، Chrome قصد دارد روی افزودن پلتفرم‌های اولیه تمرکز کند که به توسعه‌دهندگان اجازه می‌دهد این افکت‌ها را مستقیماً پیاده‌سازی کنند. برای توضیح کلی از این فلسفه به یک بستر وب منطقی مراجعه کنید.
مدل جدید کروم: مدل Throttled Async Touchmove
کروم در حال معرفی رفتار جدیدی است که برای بهبود سازگاری با کدهای نوشته شده برای مرورگرهای دیگر هنگام پیمایش، و همچنین فعال کردن سناریوهای دیگری که به گرفتن رویدادهای لمسی در حین پیمایش بستگی دارد، طراحی کرده است. این ویژگی به طور پیش‌فرض فعال است و می‌توانید با پرچم زیر، chrome://flags\#touch-scrolling-mode آن را خاموش کنید.
رفتار جدید این است:
- اولین حرکت لمسی به صورت همزمان ارسال می شود تا امکان لغو اسکرول فراهم شود
- در حین پیمایش فعال
- رویدادهای touchmove به صورت ناهمزمان ارسال می شوند
- به 1 رویداد در هر 200 میلی‌ثانیه کاهش می‌یابد ، یا اگر از ناحیه شیب 15 پیکسلی CSS فراتر رود
- Event.cancelable نادرست است
- در غیر این صورت، هنگامی که پیمایش فعال پایان می‌یابد یا امکان پذیر نیست، زیرا محدودیت پیمایش به پایان رسیده است، رویدادهای touchmove به طور معمول به طور همزمان فعال می‌شوند.
- یک رویداد لمسی همیشه زمانی رخ می دهد که کاربر انگشت خود را بلند می کند
می‌توانید این نسخه نمایشی را در Chrome for Android امتحان کنید و پرچم chrome://flags\#touch-scrolling-mode تغییر دهید تا تفاوت را ببینید.
نظر خود را با ما در میان بگذارید
مدل Async Touchmove این پتانسیل را دارد که سازگاری بین مرورگرها را بهبود بخشد و دسته جدیدی از جلوه‌های حرکت لمسی را فعال کند. ما علاقه مندیم که نظرات توسعه دهندگان را بشنویم و کارهای خلاقانه ای را ببینیم که می توانید با آن انجام دهید.