Bỏ qua jQuery hover (mouseenter, mouseleave) trên các thiết bị cảm ứng

Question

Không có chuột và con trỏ, khái niệm về các yếu tố lơ lửng trên màn hình không thực sự áp dụng được cho các thiết bị cảm ứng. Với nhiều trang web dựa trên điều hướng sự kiện di chuột JavaScript hoặc các mục đích khác, một số thiết bị cảm ứng triển khai mouseenter để kích hoạt khi một lần nhấn. Nếu trình xử lý sự kiện cũng bị ràng buộc với số click, điều này sẽ chỉ được tăng lên khi nhấn lần thứ hai vào phần tử.

Kể từ hover() chức năng của jQuery trong nội bộ sử dụng mouseenter và mouseleave, các yếu tố với cả hover() và click() đăng ký yêu cầu hai vòi để kích hoạt sau này . Đối với nhiều trường hợp sử dụng, đây chính xác là những gì bạn sẽ muốn xảy ra. Tuy nhiên, trong các ứng dụng mà việc xử lý hover() chỉ tăng thêm sự nhấn mạnh (chú giải công cụ, ánh sáng, v.v.) cho phần tử lơ lửng, có thể có ý nghĩa hơn khi bỏ qua sự kiện này.

Tôi biết cách nghe cụ thể cho các sự kiện touchstart và touchend, cho phép tôi điều chỉnh trải nghiệm người dùng cảm ứng. Đây là một giải pháp hợp lệ cho vấn đề của tôi, nhưng tôi hy vọng rằng có thể có một cách "dễ dàng hơn" xung quanh vấn đề này. Tôi đang tưởng tượng một phương pháp tương tự như hover() trong chữ ký của nó, chỉ được triển khai theo cách chỉ gắn các trình xử lý sự kiện được cung cấp trên các thiết bị không chạm.

jQuery có phương pháp như vậy không? Bất kỳ plugin nào? Hay tôi nhìn cái gì đó ở đây?

---

Hành vi xác nhận trên iPad, iPhone và một vài điện thoại di động Android.

Run JsFiddle demo này trên một máy tính để bàn vs thiết bị cảm ứng để xem những gì tôi đang nói về.

Answer 1

tôi khuyên bạn nên sử dụng Modernizr để phát hiện các touchyness của thiết bị và đơn giản là không ràng buộc điều khiển di chuột trừ các yếu tố html có "no-touch" class:

$('selector').click(...) 
$('.no-touch selector').hover(...) 

séc ra http://jsfiddle.net/juYf8/17/

Answer 2

tôi luôn luôn tự hỏi, quá, những gì sẽ xảy ra làm như vậy trên các thiết bị lai hỗ trợ liên lạc và các sự kiện click/hover. Trong trường hợp này một khi được chạm vào sẽ không còn bất kỳ sự kiện di chuột hoặc nhấp chuột nào trên trang có sẵn. Khi nào người dùng chạm vào màn hình (vì lý do nào) và sau đó có thể muốn quay lại bằng cách sử dụng chuột hoặc bàn di chuột của mình? Các trang web bị phá vỡ sau đó cho anh ta (ít nhất là nếu anh ta không quyết định tiếp tục với chạm).

Cá nhân tôi sử dụng tập lệnh cờ bên dưới và kiểm tra ngay cả các sự kiện nhập chuột và chuột để chạm vào cuối cùng. Tôi không biết đây có phải là một kỹ thuật tốt hay không. Trong trường hợp của tôi nó hoạt động khá tốt.

var touched = false; 

$("#someElement") 
    .mouseenter(function() { 
     if (!touched) { 
      // some hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .mouseleave(function() { 
     if (!touched) { 
      // some mouse leave reset hover action 
      // also secure to be in NO WAY triggered on touch device 
     }; 
    } 
    .click(function() { 
     if (!touched) { 
      // do something 
      // no double trigger on touch device 
     }; 
    } 
    .on('touchstart', function() { 
     touched = true; 
     setTimeout(function() { 
      touched = false; 
     }, 300); 
     // do touchstart stuff (similar to click or not) 
    }; 

Tôi không phải là người lập trình chuyên nghiệp. Bất kỳ ai được mời để tối ưu hóa điều đó. Trên trang web của tôi, điều này dường như là cách duy nhất để tránh các trình kích hoạt ẩn (đôi) trên thiết bị cảm ứng (iPad được thử nghiệm).

Tôi cũng biết rằng đây không phải là câu trả lời cho câu hỏi thêm vào câu trả lời đầu tiên (và nhận xét tốt) trong mắt tôi không giải quyết triệt để vấn đề lai ngay cả khi được sử dụng rộng rãi.

Dù sao, hy vọng điều này sẽ giúp ích cho bạn.