Lorsque j'utilise jQuery pour un événement de clic simple, cela ne fonctionne que pour les liens. Y a-t-il un moyen de le faire fonctionner pour des travées, etc.:
$("span.clicked").live("click", function(e){alert("span clicked!")});
$("a.clicked").live("click", function(e){alert("link clicked!")});
Le SPAN fonctionne dans Safari mais pas dans Mobile Safari (sur iPhone ou iPad) alors que le tag A fonctionne dans les deux cas.
Vous devez écouter les événements "touchstart" et "touchend". Ajoutez les auditeurs avec jQuery ...
$('span').bind( "touchstart", function(e){alert('Span Clicked!')} );
Vous voudrez peut-être écouter touchstart et touchend pour pouvoir vérifier que l'élément ciblé lorsque le doigt touché est identique à celui ciblé lorsque le doigt a été retiré.
Je suis sûr qu'il y a probablement une meilleure façon de le faire mais cela devrait fonctionner :)
Edit: Il existe un meilleur moyen! Voir https://stackoverflow.com/a/4910962/16940
J'ai eu du mal avec cela aussi. Après avoir beaucoup travaillé et essayé de résoudre le problème, je suis tombé sur une solution simple.
Si vous définissez la variable cursor
de l'élément sur pointer
, cela fonctionne comme par magie avec l'événement live et l'événement click de Jquery. Cela peut simplement être défini globalement dans le CSS.
Vous n'avez en fait pas besoin d'utiliser l'événement touchstart ou touchend, tant que la balise 'span' (ou autre chose qu'une balise 'a') a la propriété css de
cursor:pointer
le clic va s'inscrire
Vous pouvez également inciter le navigateur à générer des événements de clic en ajoutant un attribut onclick vide. Pour une approche ceinture-corset au cas où l'une ou l'autre approche cesse de fonctionner dans une mise à jour iOS donnée, vous pouvez utiliser quelque chose comme ceci:
$("span.clicked").live("click", function(e){alert("span clicked!")})
.attr('onclick','')
.css('cursor','pointer');
(en supposant que vous n'ayez aucun attribut réel onclick que vous ne craignez pas d'effacer)
Vous pouvez ajouter un attribut onclick
vide, comme suit:
<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });
J'ai tout essayé et aucune des astuces n'a fonctionné. Il s'est avéré que je ne pouvais pas avoir d'événements click, car j'avais un élément vidéo sous mon image. les éléments vidéo mangent apparemment des événements de clic.
Mon approche pour résoudre ce malentendu sur document.click.
Ajouter au code HTML après le corps de la balise balise suivante
<body>
<div id="overlaySection" onclick="void(0)"></div>
...
</body>
Un peu de style pour cette balise
`#overlaySection {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
cursor: pointer;
visibility: hidden;
opacity: 0;
content: "";
}
#overlaySection.active {
opacity: 1;
visibility: visible;
}`
Certains membres du personnel de JQuery
// hide overlay on document click
$('#overlaySection').click(function(){
$(this).removeClass('active');
});
et la principale chose à activer cette superposition
$('.dropdown > span').click(function() {
...
$('#overlaySection').addClass('active');
...
});
J'espère que cette approche sera utile à quelqu'un. Bonne codage!
Lorsque vous ciblez iOS, vous devez prendre en compte les éléments suivants: la délégation d’événements dans jQuery telle que $(document).on('click', '.target-element', function (event) {...});
ne fonctionnera pas. Vous devez ajouter onclick=""
à l'élément HTML cible ou cursor: pointer
à ses styles.
Extrait et adapté de http://gravitydept.com/blog/js-click-event-bubbling-on-ios :
Il s'avère que Safari sur l'iPhone ne prend pas en charge la délégation d'événements pour les événements de clic, sauf si le clic a lieu sur un lien ou une entrée. Heureusement, des solutions de contournement sont disponibles.
C'est la raison pour laquelle la balise <a>
fonctionne alors que <span>
ne fonctionne pas.