iOS 7 hover/cliquez sur le problème - pas de cliquez sur déclenchés dans certains cas

J'ai une sorte de "widget" - une table de données avec de riches fonctionnalités comme le tri, la sélection d'une ligne et d'autre.

Dans certains cas (widget de placement et d'imbrication dans les DOM) clique sur les lignes ne sont pas déclenchées dans iOS 7 Safari.

Widget est à l'aide de jQuery 1.6.4

Je ne peux pas publier un ensemble de code du widget (et vous avez vraiment wan pas que cela arrive ;)), mais je peux affiner un scénario de reproduction pour le cas suivant:

Simple tableau html avec quelques lignes, deux cols dans chaque
Première colonne contient une "case à cocher" simple div qui est normalement caché et qui devient visible, puis ligne parent se tournait. La visibilité est déclenchée avec CSS
Chaque ligne a un click gestionnaire d'événement. Pas de mater ce qu'il fait. Dans mon exemple, il sera le déclencheur d'une alert()
De la Table parent est un élément de bloc avec une hauteur fixe et overflow-y ensemble de auto
Table est plus grande que celle du parent, de sorte que, une table de contenu est caché et peut être vu avec le défilement

Ici est un jsFiddle: http://jsfiddle.net/822eG/4/

Sur n'importe quel navigateur de bureau, les articles sont correctement plané, cliquez sur est déclenchée. Sur iOS7 hover est un travail, mais cliquez sur n'est PAS déclenché.

NOTE: Sur iOS, vous devez appuyer deux fois pour déclencher click. Cliquez d'abord sur déclenchera hover et vous verrez une case à cocher, puis la deuxième robinet doit déclencher une click, mais il n'est pas...

Une de ces conditions est NÉCESSAIRE pour reproduire un problème. Supprimer un seul et il commence à travailler...

Si vous supprimez une "case" en apparence, cliquez sur travailler (http://jsfiddle.net/822eG/5/).

Si vous supprimez une hauteur de fix - it travailler (http://jsfiddle.net/822eG/6/).

Si vous supprimez un débordement de défilement - il fonctionnera (http://jsfiddle.net/822eG/8/).

Aucune solution de contournement est nécessaire, mais la fonctionnalité doit être gardé intacte. Donc, je ne peux pas supprimer les "case", la taille de fixer, en vol stationnaire, en cliquant sur ou de débordement de défilement. Aussi, la modification de balisage HTML est à peine à arriver.

NOTE j'ai une solution - voir ma réponse ci-dessous. Mais j'ai encore besoin d'une meilleure solution pour garder à l'aide de CSS tôt possible.

AJOUTER: Déposé un bug à Apple #16072132

OriginalL'auteur Olegas | 2014-02-14

7

Essayez ceci:
```
.wrapper {
    -webkit-overflow-scrolling: touch;
}
```
Oui, cela aide: jsfiddle.net/822eG/11. Mais pourquoi?

OriginalL'auteur Denis
2

Soudain, j'ai une solution... à l'Aide de JavaScript, je peux enlever les :hover sélecteur, mais encore conserver la fonctionnalité.

Si je vais déclencher la case visibilité qui n'est pas en CSS :hover mais selon la classe et le régler via le javascript, il va fonctionner.

http://jsfiddle.net/822eG/10/

OriginalL'auteur Olegas
2

Pour obtenir de l'iOS d'ignorer les états stationnaire, essayez ceci:
```
.wrapper 
{cursor: pointer;}
```
Vous pouvez l'utiliser sur n'importe quel élément de l'obtenir pour fonctionner comme prévu.

Ce n'est pas le contrôle de quelque chose au-delà de la définition de ce que le curseur doit ressembler quand le curseur est sur .wrapper.

OriginalL'auteur daniel18387
1

Mon travail actuel solution ne nécessite aucune des changements dans l'ensemble de la base de code et fonctionne très bien dans nos conditions
1. Avec MutationObserver, moniteur nœud d'insertion dans head
2. Si un nœud est inséré, et c'est un link, vérifiez document.styleSheets
3. Pour chaque feuille de vérifier les règles de
4. Si la règle sélecteur (accès par document.styleSheets[n].rules[i].selectorText) contient :hover vérifier styles de ce sélecteur
5. Si les styles contient display différente de none ou visibility différente de visible - c'est un "spectacle en vol plané" style
6. Pour chaque changement de style, c'est de sélecteur de remplacer :hover par .hover et de déclarer une body délégué pour mouseenter et mouseleave événements qui bascule .hover classe sur déclenchée élément
L'intégralité du code source ici: https://gist.github.com/Olegas/9143277

Votre 'source' lien est coupé à la ligne 97 au moyen d'une fonction. Il semble que ce n'est pas vrai dans vos révisions précédentes.

OriginalL'auteur Olegas
-2

..essayez d'utiliser ceci:
```
$('.row').on('touchstart click', function(){
      alert('clicked'); 
});
```
Mais... Si je commence à défiler... je vais obtenir touchstart, n'est-ce pas?
oui, mais les évènements touchstart remplace également sur

OriginalL'auteur scooterlord

Vous devez vous connecter pour publier un commentaire.