$ (document) .click() no funciona correctamente en el iPhone. jQuery

Question

Esta función funciona perfectamente en IE, Firefox y Chrome, pero cuando en el iPhone, que sólo funcionará cuando se hace clic en un <img>. Al hacer clic en la página (en cualquier lugar, pero en una img) suele disparar el evento.

$(document).ready(function() { 
    $(document).click(function (e) { 
    fire(e); 
    }); 
}); 

function fire(e) { alert('hi'); } 

La parte de HTML es extremadamente básica y no debería ser un problema.

¿Alguna idea?

Answer 1

Adición en el siguiente código funciona.

El problema es iPhones dont provocar eventos de clic. Levantan eventos "táctiles". Muchas gracias, manzana. ¿Por qué no podrían simplemente mantenerlo estándar como todos los demás? De todos modos, gracias Nico por la propina.

crédito a: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

$(document).ready(function() { 
    init(); 
    $(document).click(function (e) { 
    fire(e); 
    }); 
}); 

function fire(e) { alert('hi'); } 

function touchHandler(event) 
{ 
    var touches = event.changedTouches, 
     first = touches[0], 
     type = ""; 

    switch(event.type) 
    { 
     case "touchstart": type = "mousedown"; break; 
     case "touchmove": type = "mousemove"; break;   
     case "touchend": type = "mouseup"; break; 
     default: return; 
    } 

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //   screenX, screenY, clientX, clientY, ctrlKey, 
    //   altKey, shiftKey, metaKey, button, relatedTarget); 

    var simulatedEvent = document.createEvent("MouseEvent"); 
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
          first.screenX, first.screenY, 
          first.clientX, first.clientY, false, 
          false, false, false, 0/*left*/, null); 

    first.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
} 

function init() 
{ 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true);  
} 

Answer 2

Uso jQTouch lugar - la versión móvil de su jQuery

Answer 3

En iOS móviles el evento click no burbujea al cuerpo del documento y por lo tanto no se puede utilizar con los eventos .live(). Si tiene que usar un elemento que no puede hacer clic en el idioma nativo como una sección div o es usar cursor: puntero; en el CSS para la no-vuelo estacionario sobre el elemento en cuestión. Si eso es feo, podrías mirar en delegate().

Answer 4

cambiar esta situación:

$(document).click(function() { 

Para este

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

Tal vez esta solución no encajan en su trabajo y como se describe en las respuestas esta no es la mejor solución a aplicar. Por favor, verifique otras soluciones de otros usuarios.

Answer 5

Respuesta corta:

<style> 
    .clickable-div 
    { 
     cursor: pointer; 
    } 
</style> 

---

más larga respuesta:

Es importante darse cuenta de que si sólo está utilizando etiquetas <a> todo funcionará como se espera. Puede hacer clic o arrastrar por error en un enlace normal <a> en un iPhone y todo se comporta como el usuario esperaría.

Imagino que tiene HTML arbitrario en el que no se puede hacer clic, como un panel que contiene texto e imágenes que no se pueden envolver con <a>. Me enteré de este problema cuando tenía un panel en el que quería que se pudiera hacer clic.

<div class='clickable-div' data-href="http://www.stackoverflow.com"> 

... clickable content here (images/text) ... 

</div> 

para detectar un clic en cualquier lugar dentro de este div estoy usando jQuery con un atributo data-href HTML que se muestra arriba (este atributo es inventada por mí mismo y no es un atributo de datos estándar de jQuery o HTML.)

$(document).on('click', '.clickable-div', function() { 

    document.location = $(this).data('href'); 

}); 

Esto funcionará en su navegador de escritorio, pero no en iPad sin importar cuánto haga clic.

Puede tener la tentación de cambiar su controlador de eventos de click a click touchstart - y esto sí activa el controlador de eventos. Sin embargo, si el usuario quiere arrastrar la página hacia arriba (para desplazarse) la activará también, lo que es una experiencia de usuario terrible. [Puede que haya observado este comportamiento mediante banners furtivos]

La respuesta es muy simple: acaba de establecer el css cursor: pointer.

<style> 
    .clickable-div 
    { 
     cursor: pointer; 
    } 
</style> 

Esto tenía la ventaja añadida para los usuarios de escritorio para indicar la zona se puede hacer clic con un icono de la mano.

Gracias a https://stackoverflow.com/a/4910962/16940

Answer 6

probar esto, sólo se aplica a iPhone y el iPod lo que no está haciendo que todo se vuelve azul en Chrome o Firefox móvil;

/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer'); 

básicamente, en IOS, las cosas no son "hacer clic" por defecto - que son "palpables" (pfffff) lo que los hace "hacer clic", dándoles un cursor puntero. tiene mucho sentido, ¿verdad?

Answer 7

CSS Cursor:Pointer; es una gran solución. FastClickhttps://github.com/ftlabs/fastclick es otra solución que no requiere que cambie css si no desea Cursor:Pointer; en un elemento por algún motivo. Uso FastClick ahora de todos modos para eliminar el retraso de 300 ms en dispositivos con iOS.

Answer 8

Incluir esto en su proyecto. Verifique el "Léame" en github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix