Safari che non attiva gli eventi tattili

Question

Ho un piccolo jsfiddle - http://jsfiddle.net/qhguktsn/5/. Quando tocchi il testo nella parte superiore del collegamento (iOS Mobile Safari), ricevi solo gli eventi del mouse, nessun evento di tocco, nemmeno sul corpo. Se lo tocchi nella parte inferiore del testo, ricevi degli eventi di tocco. Dipendiamo dagli eventi di tocco per gestire un ritardo di 300 ms.

Come possiamo ottenere gli eventi di tocco per toccare sulla parte superiore del testo e in basso?

HTML:

<div style="margin-left:200px;margin-top:200px"> 
    <a style="vertical-align:center;height: 20px, width: 20px;font-size:100px" href="javascript: void 0">text</a> 
</div> 

JS:

jQuery("a").on("mousedown", function() { document.body.appendChild(document.createTextNode("mousedown ")); }); 
jQuery("a").on("mouseup", function() { document.body.appendChild(document.createTextNode("mouseup ")); }); 
jQuery("a").on("touchstart", function() { document.body.appendChild(document.createTextNode("touchstart ")); }); 
jQuery("a").on("touchend", function() { document.body.appendChild(document.createTextNode("touchend ")); }); 
jQuery("a").on("click", function() { document.body.appendChild(document.createTextNode("click ")); }); 

jQuery(document.body).on("touchstart", function() { document.body.appendChild(document.createTextNode("body touchstart ")); }); 
jQuery(document.body).on("touchend", function() { document.body.appendChild(document.createTextNode("body touchend ")); }); 

Answer 1

Il tocco eventi sul corpo sono dovute alla elemento del corpo si sposti verso il basso dalla margin-top, mettendo un contorno sull'elemento corpo delinea il touch-bersaglio:

body { outline: 1px solid red; } 

http://jsfiddle.net/qhguktsn/11/

La seconda parte del mistero sembra essere che l'obiettivo click espande al di fuori del touch-bersaglio:

Toccando il contorno rosso non si innesca un evento di tocco sull'elemento corpo, ma la l'evento click sembra sparare quando viene toccato ovunque all'interno della regione grigia -webkit-tap-highlight-color che si espande all'esterno dell'ancora stesso. I tocchi nella parte superiore attivano quindi gli eventi di clic sull'ancora, ma non toccano gli eventi sul corpo.

Answer 2

Questo è noto bug in Mobile Safari. https://bugs.webkit.org/show_bug.cgi?id=105406 C'è anche un altro con l'aggiunta di un modulo di nodo diverso documento. https://bugs.webkit.org/show_bug.cgi?id=135628

Al fine di risolverli ci sono diversi modi.

• Il primo è quello di utilizzare una piccola libreria chiamata fastclick, che supporta molti dispositivi mobili e sistemi operativi.

• La seconda opzione è aggiungere event.stopPropagation(); event.preventDefault(); in questo modo. Hai bisogno di entrambi.

  jQuery("a").on("mousedown", function(event) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      document.body.appendChild(document.createTextNode("mousedown ")); 
  }); 
  

• La terza opzione è quello di utilizzare il meta tag viewport così <meta name="viewport" content="width=device-width, user-scalable=no">. Ciò eliminerà tutti i ritardi di tocco, senza soluzioni alternative. Ma, ancora una volta su Safari potrebbe non agire come negli altri browser, perché ehi Safari is the new IE

C'è anche touch-action, ma non è supportato nella maggior parte dei browser mobili. :(

Answer 3

Ho trovato che l'evento di tocco non viene attivato quando si fa clic su un elemento contenuto da una posizione: elemento fisso che si estende oltre la finestra. Ho gestito questo rendendo il contenitore genitore più breve (usato JS per ottenere la finestra esatta altezza)

Questo problema era in un'app UIWebview che utilizza iOS 10.(Sì, usando ancora UIWebview)