Come sostituire clic con TouchStart su dispositivi iOS

Question

Obiettivo

Per chiudere il div genitore di un tag di ancoraggio quando si fa clic. Nel seguente codice, voglio nascondere div performance_tt quando l'utente fa clic sul tag di ancoraggio close_performance_tt.

Problema

Incapace di farlo funzionare su dispositivi iOS dopo aver trascorso diverse ore a questo. Funziona bene su tutto il resto, anche un dispositivo BlackBerry 10.

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;"> 
    <div>Website performance has become an important consideration for most sites. 
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention. 
    As a result, creating a system that is optimized for fast responses and low latency is key.</div> 
    <a id="close_performance_tt" href="#">Close</a> 
    <script> 
    var userAgent = navigator.userAgent.toLowerCase(); 
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false); 
    if (isiOS) { 
     $("#close_performance_tt").bind('touchstart', function() { 
      alert('Touch-start event triggered'); 
     }); 
    } else { 
     $("#close_performance_tt").bind('click', function() { 
      alert('Click event triggered'); 
     }); 
    } 
    </script> 
</div> 

Answer 1

Definire un clickHandler che è possibile utilizzare in seguito:

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click"); 

$("a").bind(clickHandler, function(e) { 
    alert("clicked or tapped. This button used: " + clickHandler); 
}); 

In tal modo, cliccare su dispositivi non-touch e TouchStart su dispositivi touch.

In caso affermativo, consigliamo vivamente di utilizzare Fast click e di utilizzare regolarmente eventi di clic. Con la soluzione di cui sopra, si innescherà "touchstart" sui collegamenti quando si scorre su di esso per scorrere la pagina, per esempio - che non è l'ideale.

Answer 2

in iOS a tag è un elemento cliccabile, in modo da toccare il link attiverà gli eventi del mouse (tra cui click).

Questo codice

$("#close_performance_tt").bind('click',function() { 
    alert('Click event triggered');        
}); 

funzionerà bene su iOs.

Per maggiori informazioni: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 3

Vedi http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

per iOS eventi del mouse come clic non bubbe a meno che:

• L'elemento target dell'evento è un link o un campo di modulo.
• L'elemento di destinazione, o uno qualsiasi dei suoi antenati fino a ma non compreso il, ha un gestore di eventi esplicito impostato per uno qualsiasi degli eventi del mouse. Questo gestore di eventi potrebbe essere una funzione vuota.
• L'elemento di destinazione o uno dei suoi antenati fino al documento incluso ha un cursore: pointer Dichiarazioni CSS.

La soluzione più semplice per me è applicare cursor: pointer ovunque nel caso si tratti di un dispositivo touch iOS. Poiché non c'è il cursore non ha alcun impatto visivo