Mobile Safari, parfois, ne déclenche pas l'événement click

C'est une dynamique JavaScript de l'application que je suis en train de travailler sur. J'ai beaucoup de <a> d'ancrage des éléments qui ont une classe. Lorsque cette classe est cliqué, quelque chose doit se passer. Cela fonctionne très bien dans Firefox, Chrome, IE, mais , dans certains cas, cliquez sur événement n'est pas déclenché sur le navigateur Safari mobile (iPad et iPhone).

Ces éléments ont tous exactement le même CSS, c'est juste leur position qui diffère (ils sont dans différents conteneurs).

J'ai essayé différentes solutions que j'ai trouvé ici, mais avec pas de chance. Par exemple:

réglage du curseur pointeur
le code dans cette réponse

Avez-vous une autre idée qui pourrait m'aider à trouver une solution à cela? Pourquoi ne l'événement click ne se déclenche que dans certains cas?

Merci!

Vous devriez avoir un attribut href pour assurer l'ancrage fonctionne correctement. Utiliser .preventDefault() en js, pour contrer son comportement.
Merci Kyle. Ajouté hrefs mais pas de chance. Les autres éléments que les travaux n'ont pas non hrefs. Exactement comment dois-je utiliser l' .preventDefault()?
L'application utilise jQuery, il est .preventDefault() dans sa fonction de clic.

InformationsquelleAutor watt | 2014-06-06

19

L'événement click résultant d'un robinet sur iOS fera des bulles comme prévu sous certaines conditions-dont vous l'avez mentionné, le curseur de style. Voici un autre:

L'élément cible, ou l'un de ses ancêtres, mais pas y compris
le <body>, a explicitement un gestionnaire d'événement pour tout de la souris
les événements. Ce gestionnaire d'événement peut être une fonction vide.

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

C'est beaucoup mieux fixer vecteur, et peut être fait sans un contrôle de navigateur. Vous n'avez qu'à ajouter une div en raison de la "non compris le <body>" partie:
```
<body>
  <div onclick="void(0);">
    
  </div>
</body>
```
Maintenant, cliquez sur chaque événement à l'origine de l'intérieur div fera des bulles comme prévu dans iOS (ce qui signifie que vous pouvez les attraper avec $(document).on('click', '.class', etc...)).
- Ce doit être la accepté de répondre.
- Moi je préfère body { cursor:pointer; }. Beaucoup de codes insérer des éléments dynamiques à body, je ne veux pas avoir à modifier tous.
- Fonctionne parfaitement, merci!
- il ne peut pas avoir des effets secondaires sur d'autres navigateurs ? parce que cette simple déclaration CSS fonctionne ! 🙂
- Non pas que j'ai trouvé jusqu'à présent..
InformationsquelleAutor LinusR
7

Avez-vous essayé?? C'est parce que ios n'est pas le feu à l'événement click parfois, ne reconnaît l'événement tactile
```
$(document).on('touchstart click', [Selector], [ Event ]
```
- Merci. Semble comme l'ajout des évènements touchstart événement fonctionne. Cependant, il pourrait ne pas être la meilleure solution que l'action se déclenche même si l'utilisateur essaie simplement de faire défiler et commence à avoir le doigt sur ce lien. Est-il un meilleur moyen que d'utiliser touchstart?
InformationsquelleAutor Gopinath Koothaperumal
3

Déclarant simplement ces vides écouteurs d'événement fait le tour. Il suffit de l'essayer 🙂

Cela permettra de le faire fonctionner sur tous les navigateurs:
```
container.addEventListener('touchstart', () => {});
container.addEventListener('touchend', () => {});
container.addEventListener('touchcancel', () => {});
container.addEventListener('touchmove', () => {});
```
- Intéressant. Pouvez-vous étendre sur les raisons de cette marche? Parce qu'il fonctionne bien!
InformationsquelleAutor Yair Kukielka
1

C'est un fou problème et en effet LinusR réponse et la description sur quirksmode sont exacts. Mon général, cliquez sur l'écouteur d'événement à ne pas travailler à cause de cela dans iOS Safari:
```
window.addEventListener('click', function(event) {
    alert("Where's my click?!");
});
```
J'ai maintenant enveloppé mon application avec un <div onclick="void(0);"></div> et qui fonctionne. J'ai aussi ajouté un peu plus de choses à corriger certains problèmes qui en est sorti:
```
<div onclick="void(0);" style="height: 100%; -webkit-tap-highlight-color: transparent;">
  <div style="height: 100%; -webkit-tap-highlight-color: initial;">
    <my-app></my-app>
  </div>
</div>
```
J'avais besoin de la height: 100%; de faire de la sur disponible sur l'ensemble de la page parce que j'en avais besoin. Si vous ne le faites pas height: 100%; l'événement de clic ne sera qu'un feu à l'intérieur de la hauteur de la div.

La -webkit-tap-highlight-color: transparent; est d'empêcher un onclick flash superposition de style, comme l'iOS par défaut avec les éléments cliquables. La div après qui permet de restaurer la valeur initiale de la propriété CSS, ainsi que d'autres éléments cliquables ont un comportement normal à cet égard. Voir cette réponse pour plus d'info.

InformationsquelleAutor gitaarik
0

Il y a un événement pour les appareils mobiles. Essayez d'ajouter le tap écouteur d'événement en plus de la click événement. Ils peuvent être fixés simultanément avec les éléments suivants:
```
$(document).on('click tap', [selector], [handler])
```
- Merci, je suppose que vous vouliez dire tap. J'ai essayé la plupart des événements avec aucun résultat.
- je suis bête, oui, je voulais dire du robinet.
- peut-être que ça aiderait à la poste de la structure, de sorte que l'on peut voir les DOM. Peut-être l'Événement de l'ist capturé ailleurs et pas barboter à travers
InformationsquelleAutor xanobius

Vous devez vous connecter pour publier un commentaire.