Saltar al contenido

El evento de clic de jQuery no funciona en navegadores móviles

Solución:

Sé que este es un tema antiguo resuelto, pero acabo de responder una pregunta similar, y aunque mi respuesta podría ayudar a alguien más, ya que cubre otras opciones de solución:

Los eventos de clic funcionan de forma un poco diferente en los dispositivos táctiles. No hay mouse, por lo que técnicamente no hay clic. Según este artículo, http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html, debido a limitaciones de memoria, los eventos de clic solo se emulan y envían desde elementos de entrada y de anclaje. Cualquier otro elemento podría usar eventos táctiles o hacer que los eventos de clic se inicialicen manualmente agregando un controlador al elemento html sin procesar, por ejemplo, para forzar eventos de clic en los elementos de la lista:

$('li').each(function(){
    this.onclick = function() {}
});

Ahora, el clic será activado por li, por lo tanto, puede ser escuchado por jQuery.


En su caso, podría simplemente cambiar el oyente al elemento de anclaje como muy bien lo puso @ mason81, o usar un evento táctil en el li:

$('.menu').on('touchstart', '.publications', function(){
    $('#filter_wrapper').show();
});

Aquí hay un violín con algunos experimentos: http://jsbin.com/ukalah/9/edit

Raminson tiene una buena respuesta si ya está (o no le importa) usando jQuery Mobile. Si desea una solución diferente, ¿por qué no modificar su código de la siguiente manera?

cambie ese LI con el que tiene problemas para incluir una etiqueta A y aplique la clase allí en lugar del LI

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="https://foroayuda.es/home/">HOME</a></li>
   <li><a href="#" class="publications">PUBLICATIONS &amp; PROJECTS</a></li>
   <li><a href="http://foroayuda.es/about/">ABOUT</a></li>
   <li><a href="http://foroayuda.es/blog/">BLOG</a></li>
   <li><a href="http://foroayuda.es/contact/">CONTACT</a></li>
 </ul>

Y su código javascript / jquery … devuelva falso para detener la propagación.

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
       return false;
   });
 });

Esto debería funcionar para lo que está tratando de hacer.

Además, noté que su sitio abre los otros enlaces en nuevas pestañas / ventanas, ¿es intencional?

Puedes usar jQuery Mobile vclick evento:

Evento normalizado para manejar eventos táctiles o de clic del mouse en dispositivos táctiles.

$(document).ready(function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
 });
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *