Cómo hacer que mi función de 'clic' funcione con iOS

Question

Tengo un conjunto de Div que actúan como botones. Estos botones tienen una función simple de jquery click() que funciona en todos los navegadores excepto en iOS.

Por ejemplo:

<div class="button">click me</div> 

y

$('.button').click(function(){ 

    alert('hi'); 

}); 

No estoy seguro de por qué esto no funciona en iOS - claramente no existe un 'clic' en IOS.

Lamentablemente, no tengo un dispositivo de iphone para probarlo yo mismo, pero recibo muchas quejas de mis clientes que quieren hacer clic en las cosas y no ocurre nada.

¿Cuál es la clave para que esto funcione?

Answer 1

Click ": significa Cuando un mousedown y eventos mouseup se producen en el mismo elemento o un elemento se activa mediante el teclado

de Jquery Bug, hay trabajo alrededor, basta con añadir "cursor: pointer" a CSS del elemento y el evento click. . funcionará como se esperaba e incluso se puede ver esto Jquery click on Ios ayuda

Answer 2

puede utilizar este:

$('button').bind("touchstart", function(){ 
    alert('hi'); 
}); 

Otra solución es establecer el cursor del elemento al puntero y funciona con jQuery en vivo y haga clic en evento. Establecerlo en CSS.

Answer 3

En realidad, la respuesta aceptada no funcionó para mí. Intenté usar "cursor: puntero", onclick = "" e incluso convertir el elemento en una etiqueta de anclaje.

Lo que hice para que funcione es vincular el evento touchstart en lugar del evento click. Para hacer que funcione en todas las plataformas que tuve que a una suplantación ua feo como este:

var ua = navigator.userAgent, 
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

jQuery("body").on(event, '.clickable_element', function(e) { 
    // do something here 
}); 

Answer 4

Basado en Marek's answer esta es mi opinión sobre ella (que es un poco limpiado):

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

Hay todavía queda mucho trabajo por delante para la industria cuando se trata de normas ...

EDIT:

no funcionó en Y teléfonos robóticos. Adoptó un enfoque más rígida:

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' } 
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' } 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

Answer 5

También basado en Marek's answer, que se adapta el evento al dispositivo para disparar una función, aquí es un código que obligan a disparar un clic en los dispositivos iOS, donde hay primero una touchstart evento:

var UA = navigator.userAgent, 
iOS = !!(UA.match(/iPad|iPhone/i)); 

if (iOS) { 
    $(document).on('touchstart', function (e) { 
     e.target.click(); 
    }); 
}