Tôi đang làm việc trên một số giao diện người dùng javascript và sử dụng rất nhiều sự kiện chạm như 'touchend' để cải thiện phản hồi trên thiết bị cảm ứng. Tuy nhiên, có một số vấn đề logic đang làm tôi khó chịu ...Tiếp xúc JavaScript so với tiến trình nhấp chuột
Tôi đã thấy nhiều nhà phát triển trộn lẫn 'touchend' và 'click' trong cùng một sự kiện. Trong nhiều trường hợp nó sẽ không làm tổn thương, nhưng về cơ bản các chức năng sẽ bắn hai lần trên các thiết bị cảm ứng:
button.on('click touchend', function(event) {
// this fires twice on touch devices
});
Nó đã được gợi ý rằng người ta có thể phát hiện khả năng cảm ứng, và thiết lập sự kiện này một cách thích hợp ví dụ:
var myEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click';
button.on(myEvent, function(event) {
// this fires only once regardless of device
});
Vấn đề với ở trên, là nó sẽ phá vỡ trên các thiết bị hỗ trợ cả cảm ứng và chuột. Nếu người dùng hiện đang sử dụng chuột trên thiết bị đầu vào kép, 'nhấp' sẽ không kích hoạt vì chỉ có 'touchend' được gán cho nút.
Một giải pháp khác là phát hiện thiết bị (ví dụ: "iOS") và chỉ định một sự kiện dựa trên điều đó: Click event called twice on touchend in iPad. Tất nhiên, giải pháp trong liên kết ở trên chỉ dành cho iOS (không phải Android hoặc các thiết bị khác), và có vẻ giống như một "hack" để giải quyết một cái gì đó khá tiểu học.
Một giải pháp khác là phát hiện chuyển động của chuột và kết hợp nó với khả năng cảm ứng để tìm hiểu xem người dùng có đang sử dụng chuột hay chạm không. Vấn đề tất nhiên là người dùng có thể không di chuyển chuột từ khi bạn muốn phát hiện nó ...
Giải pháp đáng tin cậy nhất mà tôi có thể nghĩ, là sử dụng hàm đơn giản debounce để chỉ đảm bảo chức năng kích hoạt một lần trong một khoảng thời gian ngắn (ví dụ 100ms):
button.on('click touchend', $.debounce(100, function(event) {
// this fires only once on all devices
}));
Tôi có thiếu thứ gì đó hoặc có ai có đề xuất nào tốt hơn không?
Edit: Tôi thấy liên kết này sau khi bài viết của tôi, điều này gợi ý một giải pháp tương tự như trên: How to bind 'touchstart' and 'click' events but not respond to both?
Điều đó không giải quyết được gì ... Modernizr chỉ phát hiện 'chạm'. Sự kiện sẽ vẫn kích hoạt hai lần trên các thiết bị cảm ứng. Hoặc nếu bạn gán sự kiện 'chạm' cho các thiết bị cảm ứng (thông qua modernizr), nó sẽ ngừng hoạt động cho người dùng sử dụng chuột trên các thiết bị đầu vào kép giống như nhiều thiết bị windows8. – suncat100