Propagation des événements Google Maps v3 InfoBox dans Mobile Safari

Question

J'ai créé une infobox à l'aide de google maps api v3 et infoBox à partir de la bibliothèque de l'utilitaire maps. L'infobox a des données overflow-y. Le défilement fonctionne exactement comme prévu sur les ordinateurs IE, FF, Chrome et Safari. Défilement ne fonctionne pas du tout, cependant, dans Safari mobile. C'est presque comme si l'infoBox ne détecte pas une touche pour commencer à défiler. J'ai créé cet jsfiddle pour montrer le problème. Comme vous pouvez le voir (dans le simulateur iOS ou sur un appareil iOS), les événements mouseenter, touchstart, mouseleave et touchend se déclenchent très bien; c'est juste qu'il n'y a aucun moyen de faire défiler vers le bas pour voir le texte de débordement.

J'ai eu du mal avec ça toute la semaine. Toute aide serait grandement appréciée!

Chuck

Answer 1

Je ne sais pas si c'est un bug dans Safari mobile (peu probable), infobox.js ou google maps, mais pour une raison quelconque, le défilement ne fonctionne pas à l'intérieur d'un Infobox safari mobile si la propagation d'événement est activée sur cette infobox. Le défilement fonctionnera dans d'autres navigateurs (FF, Chrome et Safari de bureau) lorsque la propagation d'événements est activée. En outre, le défilement fonctionne très bien dans un safari mobile avec la propagation d'événements désactivée pour l'infobox. Par conséquent, le hack que j'ai utilisé pour résoudre ce problème consistait simplement à déterminer si le client était un navigateur iOS, puis à définir la propagation de l'événement en conséquence. Je sais que cette approche est hackie, mais c'était le meilleur que je pouvais trouver. Voir ce fiddle pour la confirmation que cela fonctionne à la fois dans les safaris mobiles et d'autres navigateurs. Aussi, assurez-vous que vous utilisez la version la plus récente de infobox.js (1.1.11)

Answer 2

// For infobox 
var myOptions = { 
    enableEventPropagation: true 
}; 
$(document).on("click touchstart", ".clickableclass", function() { 
    // your function 
}); 

touchstart a travaillé pour moi