Giải pháp cải tiến hơn nữa
Đầu tiên, tôi theo cách tiếp cận của Rich Bradshaw , nhưng sau đó các vấn đề bắt đầu xuất hiện. Bằng cách thực hiện e.preventDefault () trên sự kiện 'touchstart' , trang không còn cuộn nữa và việc nhấn và giữ cũng không thể kích hoạt menu tùy chọn cũng như thu phóng nhấp đúp là có thể hoàn tất quá trình thực thi.
Một giải pháp có thể là tìm ra sự kiện nào đang được gọi và chỉ cần e.preventDefault () trong phần sau, 'touchhend' . Vì 'touchmove' của scroll xuất hiện trước 'touchhend', nó sẽ được giữ nguyên theo mặc định và 'click' cũng bị ngăn vì nó có từ sau trong chuỗi sự kiện áp dụng cho thiết bị di động, như vậy:
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
Nhưng sau đó, khi menu tùy chọn xuất hiện, nó không còn kích hoạt 'touchhend' chịu trách nhiệm chuyển đổi lớp học và lần sau, hành vi di chuột sẽ ngược lại, hoàn toàn bị trộn lẫn.
Một giải pháp sau đó sẽ là, một lần nữa, có điều kiện tìm ra sự kiện nào chúng ta đang tham gia hoặc chỉ thực hiện các sự kiện riêng biệt và sử dụng addClass () và removeClass () tương ứng trên 'touchstart' và 'touchhend' , đảm bảo sự kiện luôn bắt đầu và kết thúc bằng tương ứng thêm và bớt thay vì quyết định có điều kiện. Để kết thúc, chúng tôi cũng sẽ ràng buộc lệnh gọi lại xóa với loại sự kiện 'tiêu điểm' , chịu trách nhiệm xóa bất kỳ lớp di chuột nào của liên kết có thể ở lại và không bao giờ được truy cập lại, như vậy:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
Lưu ý: Một số lỗi vẫn xảy ra trong hai giải pháp trước và, cũng có thể nghĩ rằng (không được thử nghiệm), thu phóng nhấp đúp cũng không thành công.
Gọn gàng và Hy vọng không có lỗi (không phải :)) Giải pháp Javascript
Bây giờ , đối với phương pháp thứ hai, gọn gàng hơn, gọn gàng hơn và đáp ứng, chỉ sử dụng javascript (không có sự kết hợp giữa lớp .hover và pseudo: hover) và từ đó bạn có thể gọi trực tiếp hành vi ajax của mình trên sự kiện 'nhấp chuột' phổ biến (di động và máy tính để bàn) , Tôi đã tìm thấy một câu hỏi được trả lời khá tốt mà từ đó cuối cùng tôi đã hiểu cách tôi có thể kết hợp các sự kiện chạm và chuột với nhau mà không có một số lệnh gọi lại sự kiện chắc chắn sẽ thay đổi các sự kiện lẫn nhau trong chuỗi sự kiện. Đây là cách thực hiện:
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});