Bạn và người dùng muốn các ứng dụng web dành cho thiết bị di động phản hồi và cuộn mượt mà khi chạm. Việc phát triển các sự kiện này sẽ rất dễ dàng, nhưng thật không may, cách trình duyệt web dành cho thiết bị di động phản ứng với các sự kiện chạm trong khi cuộn sẽ được để lại dưới dạng thông tin chi tiết về cách triển khai trong thông số kỹ thuật TouchEvent. Do đó, các phương pháp có thể được chia thành 4 danh mục. Tình huống này cho thấy một sự căng thẳng cơ bản giữa việc cung cấp thao tác cuộn mượt mà và duy trì quyền kiểm soát của nhà phát triển.
Bốn mô hình xử lý sự kiện chạm khác nhau?
Sự khác biệt về hành vi giữa các trình duyệt được chia thành 4 mô hình.
Xử lý sự kiện đồng bộ thông thường
Các sự kiện touchmove được gửi trong quá trình cuộn và mỗi lần cập nhật cuộn sẽ chặn cho đến khi quá trình xử lý touchmove hoàn tất. Đây là cách tốt nhất vì dễ hiểu nhất và mạnh mẽ nhất, nhưng lại không tốt cho hiệu suất cuộn vì điều này có nghĩa là mỗi khung trong quá trình cuộn phải chặn trên luồng chính.
Trình duyệt: Trình duyệt Android (Android 4.0.4, 4.3), Safari dành cho thiết bị di động (khi cuộn div)
Xử lý touchmove không đồng bộ
Sự kiện touchmove được gửi trong khi cuộn, nhưng quá trình cuộn có thể diễn ra không đồng bộ (sự kiện touchmove bị bỏ qua sau khi quá trình cuộn bắt đầu). Điều này có thể dẫn đến việc "xử lý hai lần" các sự kiện, chẳng hạn như tiếp tục cuộn sau khi trang web thực hiện một thao tác nào đó với touchmove và gọi preventDefault trên sự kiện, yêu cầu trình duyệt không xử lý sự kiện đó.
Trình duyệt: Safari dành cho thiết bị di động (khi cuộn Tài liệu), Firefox
Tính năng di chuyển bằng thao tác chạm bị chặn trong khi cuộn
Các sự kiện touchmove không được gửi sau khi quá trình cuộn bắt đầu và không tiếp tục cho đến sau sự kiện touchend. Trong mô hình này, khó có thể phân biệt giữa thao tác chạm tĩnh và thao tác cuộn.
Trình duyệt: Trình duyệt Samsung (gửi sự kiện di chuyển chuột)
Touchcancel khi bắt đầu cuộn
Bạn không thể có cả hai cách – cuộn mượt mà và kiểm soát của nhà phát triển – và mô hình này làm rõ sự đánh đổi giữa việc cuộn mượt mà và xử lý sự kiện, tương tự như ngữ nghĩa của thông số kỹ thuật Sự kiện con trỏ. Một số trải nghiệm có thể cần theo dõi ngón tay, chẳng hạn như kéo để làm mới, sẽ không thể thực hiện được.
Trình duyệt: Chrome dành cho máy tính M32 trở lên, Chrome dành cho Android
Lý do thay đổi
Chrome cho Android hiện sử dụng Mô hình cũ của Chrome: touchcancel khi bắt đầu cuộn, giúp cải thiện hiệu suất cuộn nhưng khiến nhà phát triển nhầm lẫn. Cụ thể, một số nhà phát triển không biết về sự kiện touchcancel hoặc cách xử lý sự kiện này, điều này đã khiến một số trang web bị hỏng. Quan trọng hơn, toàn bộ lớp hiệu ứng và hành vi cuộn giao diện người dùng, chẳng hạn như kéo để làm mới, thanh ẩn và điểm chụp nhanh rất khó hoặc không thể triển khai hiệu quả.
Thay vì thêm các tính năng được mã hoá cứng cụ thể để hỗ trợ các hiệu ứng này, Chrome tập trung vào việc thêm các nguyên hàm nền tảng cho phép nhà phát triển triển khai trực tiếp các hiệu ứng này. Hãy xem bài viết Nền tảng web hợp lý để biết thông tin tổng quan về triết lý này.
Mô hình mới của Chrome: Mô hình Touchmove không đồng bộ bị điều tiết
Chrome sẽ ra mắt một hành vi mới được thiết kế để cải thiện khả năng tương thích với mã được viết cho các trình duyệt khác khi cuộn, cũng như cho phép các trường hợp khác phụ thuộc vào việc nhận sự kiện touchmove trong khi cuộn. Tính năng này được bật theo mặc định và bạn có thể tắt tính năng này bằng cờ chrome://flags\#touch-scrolling-mode sau.
Hành vi mới là:
- Lệnh di chuyển chạm đầu tiên được gửi đồng bộ để cho phép thao tác cuộn được huỷ
- Trong khi cuộn đang hoạt động
- sự kiện touchmove được gửi không đồng bộ
- bị điều tiết ở mức 1 sự kiện mỗi 200 mili giây hoặc nếu vượt quá vùng dốc CSS 15px
- Event.cancelable là false
- Nếu không, các sự kiện touchmove sẽ kích hoạt đồng bộ như bình thường khi thao tác cuộn đang hoạt động bị chấm dứt hoặc không thể thực hiện được vì đã đạt đến giới hạn cuộn
- Sự kiện touchend luôn xảy ra khi người dùng nhấc ngón tay lên
Bạn có thể thử bản minh hoạ này trong Chrome dành cho Android và bật/tắt cờ chrome://flags\#touch-scrolling-mode để xem sự khác biệt.
Hãy cho chúng tôi biết suy nghĩ của bạn
Mô hình Async Touchmove có khả năng cải thiện khả năng tương thích trên nhiều trình duyệt và hỗ trợ một lớp hiệu ứng cử chỉ chạm mới. Chúng tôi rất muốn biết ý kiến của các nhà phát triển và những điều sáng tạo mà bạn có thể làm được với API này.