Ignorar jQuery hover (mouseenter, mouseleave) en dispositivos táctiles

Question

Al no tener mouse ni puntero, el concepto de elementos que se ciernen sobre la pantalla no es realmente aplicable para dispositivos táctiles. Con muchos sitios web que dependen de JavaScript para navegar por eventos u otros fines, algunos dispositivos táctiles implementan el mouseenter para disparar con un solo toque. Si un controlador de eventos también está vinculado al click, esto solo se generará en un segundo toque en el elemento.

Dado que la función de jQuery hover() utiliza internamente mouseenter y mouseleave, los elementos con ambos hover() y click() registros requiere dos grifos para activar este último . Para muchos casos de uso, esto es exactamente lo que deseará que suceda. Sin embargo, en aplicaciones donde el manejo de hover() solo agrega énfasis (información sobre herramientas, resplandor, etc.) al elemento fijo, podría tener más sentido omitir el evento, todos los dispositivos táctiles, acercándose al controlador onclick.

Sé cómo escuchar específicamente los eventos touchstart y touchend, lo que me permite personalizar la experiencia táctil del usuario. Esta es una solución válida para mi problema, pero espero que haya una manera "más fácil" de solucionarlo. Me imagino un método similar a hover() en su firma, implementado solo de manera que solo se adjunta a los controladores de eventos proporcionados en dispositivos no táctiles.

¿Tiene jQuery ese método? Cualquier complemento? ¿O estoy pasando por alto algo aquí?

---

Comportamiento confirmó en el iPad, iPhone y algunos teléfonos Android.

Ejecutar este JsFiddle demo en un escritorio vs dispositivo táctil para ver lo que estoy hablando.

Answer 1

recomiendo el uso de Modernizr para detectar la touchyness del dispositivo y simplemente no se unen al controlador de vuelo estacionario a menos que el elemento html tiene la "no-touch" clase:

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

la salida http://jsfiddle.net/juYf8/17/

Answer 2

I Siempre me pregunto, también, qué sucederá al hacerlo en los dispositivos híbridos que admiten eventos táctiles y de clic/desplazamiento. En este caso, una vez que se haya tocado, ya no habrá ningún elemento de desplazamiento o clic en eventos en la página disponible. ¿Qué ocurre cuando el usuario toca una vez la pantalla (por alguna razón) y luego puede volver con su mouse o touchpad? El sitio está roto entonces para él (al menos si él no decide en consecuencia continuar con toques).

Personalmente utilizo el siguiente guion de marca y comprobé que incluso el mouse ingrese y deje el mouse para eventuales toques. No sé si esta es una buena técnica. En mi caso, funciona bastante bien.

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) 
    }; 

No soy un codificador profesional. Cualquiera de ellos está invitado a optimizar eso. En mi página web, esta parece ser la única forma de evitar activadores ocultos (dobles) en el dispositivo táctil (iPad probado).

También sé que esta no es exactamente la respuesta a la pregunta más una adición a la primera respuesta (y es un buen comentario) que en mi opinión no resuelve completamente el problema híbrido aunque esté en uso.

De todos modos espero que esto ayude en su camino.