$ (document) .click () non funziona correttamente su iPhone. jquery

Questa funzione funziona perfettamente su IE, Firefox e Chrome, ma quando funziona su iPhone, funzionerà solo quando si fa clic su un . Cliccando sulla pagina (ovunque ma su una img) non si accende l’evento.

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

La parte HTML è estremamente semplice e non dovrebbe essere un problema.

Qualche idea?

Risposta breve:

  

Risposta più lunga:

È importante rendersi conto che se usi solo tag tutto funzionerà come previsto. Puoi fare clic o trascinare per errore su un normale collegamento su un iPhone e tutto si comporta come l’utente si aspetterebbe.

Immagino che tu abbia un codice HTML arbitrario che non è cliccabile, come un pannello contenente testo e immagini che non possono essere racchiusi con . Ho scoperto questo problema quando avevo un pannello di questo tipo che volevo essere interamente cliccabile.

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

Per rilevare un clic ovunque all’interno di questo div, sto usando jQuery con un attributo html data-href che è mostrato sopra (questo attributo è inventato da me stesso e non è un attributo di dati jQuery o HTML standard).

 $(document).on('click', '.clickable-div', function() { document.location = $(this).data('href'); }); 

Funzionerà sul tuo browser desktop ma non su iPad, non importa quanto clicchi.

Potresti essere tentato di modificare il gestore di eventi da clickclick touchstart e questo effettivamente fa scattare il gestore di eventi. Tuttavia, se l’utente vuole trascinare la pagina verso l’alto (per scorrere), verrà triggersta anche tu – che è una terribile esperienza utente. [potresti aver notato questo comportamento con i banner pubblicitari furtivi]

La risposta è incredibilmente semplice: basta impostare il cursor: pointer css cursor: pointer .

  

Ciò ha avuto l’ulteriore vantaggio per gli utenti desktop di indicare che l’area è selezionabile con un’icona a forma di mano.

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

L’aggiunta nel seguente codice funziona.

Il problema è che iPhone non solleva eventi di clic. Sollevano eventi “touch”. Grazie mille mele. Perché non potevano semplicemente mantenere lo standard come tutti gli altri? Comunque grazie Nico per la mancia.

Credito 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); } 

Cambia questo:

 $(document).click( function () { 

A questa

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

Forse questa soluzione non si adatta al tuo lavoro e, come descritto nelle risposte, questa non è la soluzione migliore da applicare. Per favore, controlla un’altra correzione da un altro utente.

prova questo, si applica solo a iPhone e iPod in modo da non rendere tutto diventa blu su Chrome o Firefox mobile;

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

in pratica, su iOS, le cose non sono “cliccabili” per impostazione predefinita – sono “tangibili” (pfffff) in modo da renderle “cliccabili” dando loro un cursore puntatore. ha senso, vero ??

Cursor:Pointer; CSS Cursor:Pointer; è un’ottima soluzione. FastClick https://github.com/ftlabs/fastclick è un’altra soluzione che non richiede di cambiare i CSS se non si desidera Cursor:Pointer; su un elemento per qualche motivo. Ora utilizzo comunque fastclick per eliminare il ritardo di 300 ms sui dispositivi iOS.

Usa invece jQTouch – la versione mobile di jQuery

Sui dispositivi mobili iOS l’evento click non bolle sul corpo del documento e quindi non può essere utilizzato con eventi .live (). Se devi usare un elemento click-able non nativo come un div o una sezione devi usare cursor: pointer; nel tuo css per il non-hover sull’elemento in questione. Se questo è brutto, puoi dare un’occhiata a delegate ().

Includi questo al tuo progetto. Controlla il file “Leggimi” su github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix