documento. función de clic para dispositivo táctil

Tengo un subnave que funciona con jquery: un usuario hace clic en el elemento de la lista de nivel superior, por ejemplo, “servicios”, que activa el menú desplegable. El menú desplegable se alterna al hacer clic en el enlace ‘servicio’. Lo hice para que el usuario pueda hacer clic en cualquier parte de la pantalla para alternar el menú desplegable a un estado cerrado. Pero como el sitio es receptivo, quiero que el usuario pueda hacer clic (tocar) en cualquier lugar de la pantalla para cerrar el menú desplegable, pero mi problema es que no funciona en los dispositivos táctiles.

La configuración de mi código para el clic del documento es:

$(document).click(function(event) { if ( $(".children").is(":visible")) { $("ul.children").slideUp('slow'); } }); 

Supongo que document.click podría no funcionar en dispositivos táctiles, y si no, ¿qué solución hay para lograr el mismo efecto?

Gracias

Para activar la función con un clic o toque, puede cambiar esto:

 $(document).click( function () { 

A esto:

 $(document).on('click touchstart', function () { 

O esto:

 $(document).on('click touch', function () { 

El evento touchstart se dispara tan pronto como se toca un elemento, el evento touch se parece más a un “toque”, es decir, un único contacto en la superficie. Realmente deberías probar cada uno de estos para ver qué funciona mejor para ti. En algunos dispositivos, el touch puede ser un poco más difícil de disparar (lo que puede ser bueno o malo: evita que se cuente un arrastre, pero un pequeño arrastre accidental puede hacer que no se dispare).

touchstart o touchend no son buenos, porque si se desplaza por la página, el dispositivo hace las cosas. Entonces, si quiero cerrar una ventana con un toque o hacer clic fuera del elemento, y desplazarme por la ventana, he terminado:

 $(document).on('touchstart', function() { documentClick = true; }); $(document).on('touchmove', function() { documentClick = false; }); $(document).on('click touchend', function(event) { if (event.type == "click") documentClick = true; if (documentClick){ doStuff(); } }); 

¿puedes usar jqTouch o jquery mobile ? allí es mucho más fácil manejar eventos táctiles. Si no es así, debe simular un clic en el dispositivo táctil, siga estos artículos:

iphone-touch-events-in-javascript

Una demostración táctil

Más en este hilo

Para aplicarlo en todos lados, podrías hacer algo como

 $('body').on('click', function() { if($('.children').is(':visible')) { $('ul.children').slideUp('slow'); } }); 

Como se indicó anteriormente, el uso de 'click touchstart' obtendrá el resultado deseado. Sin embargo, si console.log(e) sus clics, puede encontrar que cuando jquery reconoce el toque como un clic – obtendrá 2 acciones de clic y toque. La solución a continuación funcionó para mí.

 //if its a mobile device use 'touchstart' if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { deviceEventType = 'touchstart' } else { //If its not a mobile device use 'click' deviceEventType = 'click' } $(document).on(specialEventType, function(e){ //code here });