jQuery onMouseover/onClick para usuarios de pantalla táctil (es decir, iPad)

Question

Así que hice un menú plegable en un sistema basado en un sitio web que minimizaba el menú en 6 "botones joya" en la parte superior derecha de la pantalla, cada uno lo mismo y contiene un número, que es el número de alertas que se refieren a los elementos dentro del menú.

El contenido de estos no es realmente relevante para mi pregunta, sino que simplemente explica que no son textuales y por lo tanto no tienen etiquetas claras y fáciles de leer que expliquen qué hacen los elementos del menú.

Por lo tanto, he puesto una sugerencia de herramienta onMouseover que muestra un div oculto que explica qué es cada elemento del menú.

También hay un evento onClick donde jQuery desliza el menú a la vista.

Este es un sistema de Intranet privada, yo no utilizar estos menús en un sitio web público, ya que no es lo suficientemente claro, pero dado que esta es la aplicación, mi problema es:

Cuando se ve en un iPad de ejemplo (y presumiblemente otros dispositivos con pantalla táctil), el onMouseover se maneja como un onClick, por lo tanto, 'hacer clic' en el botón solo muestra la información sobre herramientas y no el menú, según sea necesario.

¿Cuál es el consejo para manejar esto?

He visto este hilo Detect iPad users using jQuery? así que, dado que es una aplicación web privada, pude detectar usuarios de iPad y reconstruir jQuery para ignorar el comando onMouseover para usuarios de iPad, pero si tuviera que expandir una aplicación similar a algo que puede tener más usuarios, ¿cuál sería la forma de manejar estos dos eventos?

Answer 1

if ("ontouchstart" in window || "ontouch" in window) { 
    // bind the relevant functions to the 'touch'-based events for iOS 
} 
else { 
    // use the classic mouse-events, 'mouseover,' 'click' and so on. 
} 

He probado esto con la siguiente demostración sencilla, aunque sin evento de unión (todavía) en la pantalla completa JS Fiddle demo (También he hecho un TinyUrl para redirigir a la demostración, para facilitar la entrada en los dispositivos iOS: tinyurl.com/drtjstest2/).

demostración revisado, con funciones de eventos asignados:

var body = document.getElementsByTagName('body')[0]; 

if ("ontouchstart" in window) { 
    body.style.backgroundColor = 'red'; 
    body.ontouchstart = function(){ 
     this.style.backgroundColor = 'yellow'; 
    }; 
    body.ontouchend = function(){ 
     this.style.backgroundColor = 'green'; 
    }; 
} 
else { 
    body.style.backgroundColor = 'green'; 
    body.onmousedown = function(){ 
     this.style.backgroundColor = 'yellow'; 
    }; 
    body.onmouseup = function(){ 
     this.style.backgroundColor = 'red'; 
    }; 
} 

JS Fiddle demo (y la alternativa TinyUrled: tinyurl.com/drtjstest3/).

Referencias:

• preguntas y respuestas, aquí en Stackoverflow:
  • Detecting support for a given JavaScript event?
  • iOS Web App touch gestures