web-dev-qa-db-fra.com

Safari ne déclenche pas d'événements tactiles

J'ai un petit jsfiddle - http://jsfiddle.net/qhguktsn/5/ . Lorsque vous appuyez sur le texte en haut du lien (iOS mobile Safari), vous n’obtenez que les événements relatifs à la souris, aucun événement tactile, pas même le corps. Si vous appuyez sur au bas du texte, vous obtenez des événements tactiles. Nous dépendons des événements tactiles pour gérer un délai de 300 ms.

Comment pouvons-nous obtenir des événements tactiles pour taper à la fois sur le haut et le bas du texte?

HTML:

<div style="margin-left:200px;margin-top:200px">
    <a style="vertical-align:center;height: 20px, width: 20px;font-size:100px" href="javascript: void 0">text</a>
</div>

JS:

jQuery("a").on("mousedown", function() { document.body.appendChild(document.createTextNode("mousedown ")); });
jQuery("a").on("mouseup", function() { document.body.appendChild(document.createTextNode("mouseup ")); });
jQuery("a").on("touchstart", function() { document.body.appendChild(document.createTextNode("touchstart ")); });
jQuery("a").on("touchend", function() { document.body.appendChild(document.createTextNode("touchend ")); });
jQuery("a").on("click", function() { document.body.appendChild(document.createTextNode("click ")); });

jQuery(document.body).on("touchstart", function() { document.body.appendChild(document.createTextNode("body touchstart ")); });
jQuery(document.body).on("touchend", function() { document.body.appendChild(document.createTextNode("body touchend ")); });
iosmobile-safari
12
Puppy

Les événements tactiles sur le corps sont dus au décalage de l'élément du corps par le haut de la marge, ce qui permet de tracer un contour sur l'élément du corps qui décrit la cible au toucher:

body { outline: 1px solid red; }

http://jsfiddle.net/qhguktsn/11/

La deuxième partie du mystère semble être que la cible du clic se développe en dehors de la cible tactile:

 screenshot of text

Toucher le contour rouge ne déclenchera pas d'événement tactile sur l'élément body, mais l'événement click semble se déclencher lorsqu'il est exploité n'importe où dans la zone grise -webkit-tap-highlight-color qui s'étend à l'extérieur de l'ancre. Taper tout en haut déclenchera donc des événements de clic sur l'ancre, mais ne touchera pas les événements sur le corps.

2
Douglas

Ceci est un bogue connu dans Mobile Safari. https://bugs.webkit.org/show_bug.cgi?id=105406 Il en existe un autre également, qui consiste à ajouter un document différent sous forme de noeud. https://bugs.webkit.org/show_bug.cgi?id=135628

Pour les réparer, il y a plusieurs façons.

  • La première consiste à utiliser une petite bibliothèque appelée fastclick , qui prend en charge de nombreux périphériques mobiles et systèmes d’exploitation.

  • La deuxième option consiste à ajouter event.stopPropagation(); event.preventDefault(); comme ça. Vous avez besoin des deux.

    jQuery("a").on("mousedown", function(event) {
    event.stopPropagation();
    event.preventDefault();
    document.body.appendChild(document.createTextNode("mousedown ")); 
});

  • La troisième option consiste à utiliser la balise méta viewport comme celle-ci <meta name="viewport" content="width=device-width, user-scalable=no">. Cela éliminera tous les retards de contact, sans aucune solution de contournement. Mais, encore une fois sur Safari, il ne peut pas agir comme dans les autres navigateurs, parce que/ Safari est le nouveau IE

Il y a aussi touch-action , mais ce n'est pas supporté par la plupart des navigateurs mobiles. :(

7
Stanimir Dimitrov

J'ai constaté que l'événement tactile n'est pas déclenché lorsque l'utilisateur clique sur un élément contenu dans une position: élément fixe qui s'étend au-delà de la fenêtre. J'ai géré cela en raccourcissant le conteneur parent (JS utilisé pour obtenir la hauteur exacte de la fenêtre).

Ce problème se trouvait dans une application UIWebview utilisant iOS 10. (Oui, toujours avec UIWebview)

1
user984003