Chrome 47 có một tính năng mới giúp bạn dễ dàng hiểu cách người dùng tương tác với trang web của bạn: InputDeviceCapabilities! Hãy dừng lại một chút và tìm hiểu lý do tại sao điều này lại quan trọng.
Sự kiện đầu vào DOM là yếu tố trừu tượng phía trên sự kiện đầu vào cấp thấp, gắn liền với đầu vào của thiết bị thực tế (ví dụ: click có thể được kích hoạt bằng chuột, màn hình cảm ứng hoặc bàn phím). Tuy nhiên, có một vấn đề xảy ra: không có phương pháp đơn giản nào
để lấy thông tin chi tiết của thiết bị thực chịu trách nhiệm cho một sự kiện.
Ngoài ra, một số loại đầu vào nhất định có thể tạo thêm các sự kiện đầu vào DOM "giả" vì lý do tương thích. Một sự kiện DOM giả như vậy xảy ra khi người dùng nhấn vào màn hình cảm ứng (chẳng hạn như trên điện thoại di động); sự kiện này không chỉ kích hoạt các sự kiện cảm ứng mà còn kích hoạt các sự kiện chuột.
Điều này gây ra vấn đề cho nhà phát triển khi hỗ trợ cả phương thức nhập bằng chuột và thao tác chạm. Bạn sẽ khó biết được liệu sự kiện mousedown có thực sự đại diện cho dữ liệu đầu vào mới từ chuột hay chỉ là sự kiện tương thích cho một sự kiện chạm đã xử lý trước đó.
API InputDeviceCapabilities mới cung cấp thông tin chi tiết về nguồn cơ bản của sự kiện đầu vào thông qua đối tượng sourceCapabilities trên UIEvent.
Đối tượng có thuộc tính firesTouchEvents được đặt thành true hoặc false dựa trên cách hành động của người dùng tạo sự kiện.
Câu hỏi là: Công thức này nên được dùng trong trường hợp nào?
Ngoài Sự kiện con trỏ, ngày nay, nhiều nhà phát triển xử lý logic tương tác trong lớp cảm ứng, ngăn chế độ Mặc định tránh tạo sự kiện chuột "giả" ngay từ đầu.Thiết kế này hoạt động tốt trong nhiều trường hợp và không cần thay đổi để tận dụng InputDeviceCapabilities.
Tuy nhiên, trong một số trường hợp, bạn thực sự không muốn preventDefault sự kiện chạm; ví dụ: bạn vẫn muốn nhấn để gửi sự kiện "nhấp vào" và thay đổi tiêu điểm. Đối với những trường hợp này, thông tin được lưu giữ trong thuộc tính MouseEvent.sourceCapabilities.firesTouchEvents cho phép bạn bắt đầu hợp nhất logic cho các sự kiện dựa trên thao tác chạm và dựa trên chuột thành một mô hình tương tự với cách bạn quản lý logic với Sự kiện con trỏ. Điều đó nghĩa là bạn có thể chỉ có một bộ mã quản lý logic tương tác và cung cấp cho nhà phát triển một cách đơn giản hơn để chia sẻ logic giữa các trình duyệt có và không hỗ trợ Sự kiện con trỏ.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
Tin vui là Rick Byers đã lấp đầy thành công việc này do Rick Byers đã sử dụng để bạn có thể sử dụng trên hầu hết các nền tảng.
Hiện nay, API này rất nhỏ, tập trung vào việc giải quyết một vấn đề cụ thể về việc xác định sự kiện chuột bắt nguồn từ sự kiện chạm.
Thậm chí, bạn có thể tạo thực thể cho một thực thể của InputDeviceCapabilities; tuy nhiên, thực thể này chỉ chứa firesTouchEvents. Trong tương lai, công cụ này dự kiến sẽ mở rộng để cho phép bạn hiểu thêm về tất cả thiết bị đầu vào trên hệ thống của người dùng. Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về các trường hợp sử dụng.