Chrome 47 có một tính năng mới giúp bạn dễ dàng hiểu được cách người dùng tương tác với trang web của bạn: InputDeviceCapabilities! Hãy cùng quay 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à một khái niệm trừu tượng ở cấp cao hơn các sự kiện đầu vào cấp thấp, liên kết lỏng lẻo với đầu vào thiết bị thực (ví dụ: Sự kiện 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 đề: không có phương thức đơn giản nào để lấy thông tin chi tiết về 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 dữ liệu đầ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ả mạo 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 chạm mà còn kích hoạt các sự kiện chuột vì lý do tương thích.
Đ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à cảm ứng. Rất khó để biết liệu một 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à một sự kiện tương thích cho một sự kiện touchstart đã được xử lý trước đó.
API InputDeviceCapabilities
mới cung cấp thông tin chi tiết về các 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
sự kiện được tạo bằng hành động của người dùng.
Câu hỏi đặt ra là: Bạn nên sử dụng tính năng này ở đâu?
Ngoài các 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 Default tạo các 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 các thao tác nhấn gửi sự kiện "nhấp" 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 cảm ứng và chuột vào một mô hình tương tự như cách bạn quản lý logic bằng Sự kiện con trỏ. Tức là bạn 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 hỗ trợ 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 đã Polyfilled thành phần này để bạn có thể sử dụng trên hầu hết các nền tảng.
Hiện tại, API này rất nhỏ gọn, tập trung vào việc giải quyết một vấn đề cụ thể liên quan đến việc xác định các sự kiện chuột bắt nguồn từ sự kiện chạm.
Bạn thậm chí có thể tạo bản sao của InputDeviceCapabilities
; tuy nhiên, bản sao này chỉ chứa firesTouchEvents
. Trong tương lai, chúng tôi dự kiến sẽ
mở rộng
để giúp bạn hiểu rõ hơn 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.