web-dev-qa-db-fra.com

Comment utiliser jQuery pour l'événement click dans l'application Web iPhone

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.

jqueryiphoneweb-applications
38
Gazzer

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

25
Sam

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.

116
Plynx

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

20
MonOve

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)

2
CupawnTae

Vous pouvez ajouter un attribut onclick vide, comme suit:

<span onclick=''>Touch or Click Me</span>
jQuery('span').live('click', function() { alert('foo'); });
2
Charlie Schliesser

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.

1
mhenry1384

Mon approche pour résoudre ce malentendu sur document.click.

  1. Ajouter au code HTML après le corps de la balise balise suivante

    <body> <div id="overlaySection" onclick="void(0)"></div> ... </body>

  2. 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;
}`

  3. 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!

0
nosensus

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.

0
mcdado