Je crée un site sur Safari pour iPad. Je dois empêcher le zoom sur l'événement à double taraudage, mais j'ai deux problèmes:
". .. Si je l'ai fait, les utilisateurs ne pourraient jamais zoomer sur ma page.
Comment puis-je résoudre ces problèmes?
8 Réponses :
Safari mobile ne prend pas en charge l'événement JavaScript Ondblclick. Il est interprété par Safari en tant que "zoom".
Raul Sanchez a posté une solution potentielle: http://appropolis.com/implenting-doubletap-on-iphones-and- iPads /
J'ai utilisé cette solution ... Ce sujet est vraiment détaillé, merci! Pour les visiteurs, l'idée principale est la suivante: Premièrement, attrapez un événement «Tap». Ensuite, si un autre événement "Tap" est lancé avant 500 ms: c'est un "double touche", donc si vous pouvez arrêter l'événement ici -> Non "Double Tap" :) Voir le lien pour plus d'explications.
Voici un plugin JQuery que j'ai écrit dans le même but - désactiver de manière sélective Double-tap Zoom sur des éléments de page donnés (dans mon cas, des boutons de navigation pour retourner des pages) Je veux répondre à chaque robinet (y compris double tap) en tant que Evénement de clic normal, sans iOS "Touch Magic".
Pour l'utiliser, il suffit de courir quelque chose comme $ ('. prev, .nsext'). nodoubletapzoom (); sur les éléments que vous aimez pour. ( edit: ignore également les pinches)
Cela fonctionne, mais a un bug: plus que-deux-taper. Ajoutez ceci après avoir déclenché les clics d'envergure suivants: $ (this) data ('lasttouch', 0); . Sans cela, vous obtenez quatre clics lorsque vous triple Tap (Possible plus sur Quadruple-Tap). Avec vous, vous obtenez trois clics sur Triple-Tap, à quatre clics de quadruple-robinet. L'idée est que vous pourriez avoir un élément qui devrait répondre à de nombreux robinets consécutifs (plutôt que d'être détenus, pour des raisons).
Cette solution semble empêcher tous les clics répétés, si le délai entre eux est inférieur à 500 ms. Serait-il en quelque sorte possible de permettre de cliquer, par exemple. 5 fois dans un délai de 500ms et empêche toujours le zoom? J'aurais besoin d'une manière à quel point les clics répétés fonctionnent dans les périphériques de la souris.
J'ai trouvé une solution simple à mon problème de tireur: Stackoverflow.com/a/30744654/1691517 . Il n'attend pas 500ms à un nouveau clic, mais le fait immédiatement, mais empêche toujours que le zoom de robinet indésirable.
Juste définir la fenêtre peut ne pas toujours être suffisant - dans certains cas, vous devrez peut-être aussi appeler événement.preventDefault (); sur le gestionnaire TOUCHSTART.
J'ai modifié la solution JavaScript de @ Ecmanaut pour faire deux choses.
Je pense que ces modifications le rendent mieux, car vous pouvez incrémenter un compteur 1,2,3,4 au lieu de 2,4,6,8
Voici le code modifié: l'appliquer le nodoubletapzoom () à la balise de corps, comme celui-ci Votre construction HTML, devrait être quelque chose Comme ceci puis dans votre JavaScript, liez vos gestionnaires de clic comme celui-ci Vous pouvez utiliser n'importe quel gestionnaire d'événements JQuery et n'importe quel nœud DOM. Maintenant, vous n'avez rien à faire de plus que cela, vous devez attacher toutes vos manipulateurs d'événement de cette manière, je n'ai pas essayé d'une autre manière, mais cette façon fonctionne absolument rock solide, vous pouvez littéralement rap l'écran 10 fois par seconde et Il ne fait pas zoomer et enregistre les clics (évidemment pas 10 par seconde, l'iPad n'est pas si rapide, ce que je veux dire, vous ne pouvez pas déclencher le zoom) Je pense que cela fonctionne parce que vous ne travaillez pas parce que tu es Fixation du gestionnaire de NONZOOM au corps, puis de fixer tous vos gestionnaires de votre événement au nœud ".Content", mais déléguant au nœud spécifique en question, donc JQuery attrape tous les gestionnaires à la dernière étape avant que l'événement ne puisse bouillir au corps. tag. Le principal avantage de cette solution est que vous devez attribuer le gestionnaire nodoubletapzoom () au corps, vous ne le faites qu'une fois, pas une fois pour chaque élément, donc c'est beaucoup moins de travail, d'efforts et de penser requis pour que les choses soient faites. Ceci a l'avantage supplémentaire en ce que si vous ajoutez du contenu à l'aide de Ajax, ils ont un ont uomatiquement avoir les gestionnaires prêts et en attente, je suppose que si vous ne le souhaitez pas, cette méthode ne fonctionnera pas pour vous et vous devrez l'ajuster plus. J'ai vérifié que ce code fonctionne sur ipad, c'est beau en fait, bien fait à @ecmanaut pour la solution principale !! ** Modifié le samedi 26 mai parce que j'ai trouvé ce qui semble être une solution parfaite avec un effort absolument minimal < / p>
Le "double clic" accepté est pour moi un petit "ballonné" et en utilisant un horodatage ... Pourquoi? Pourquoi? Regardez cette implémentation simple sans «BLOQUE» excessif.
body * { -webkit-user-select:none; }
acclamations! p> p>
Essayez ce code modifié. Il devrait fonctionner pour des périphériques Android et iOS
$("body").nodoubletapzoom();
Merci pour cela! J'ai fait un exemple: JSBIN.COM/DIHOXEDIKA/1 . Le problème du code de l'ECMANAUTS était $ (this) .trigger ("click '). Trigger (" Cliquez sur ") . Lorsque j'ai remplacé Ceci avec e.target et supprimé le deuxième déclencheur, il a commencé à fonctionner dans Android Chrome. Le problème était que les clics répétés rapides n'étaient pas possibles.
Toutes les solutions que j'ai vues (sur cette page et ailleurs) ont un effet secondaire qu'ils empêchent dans des clics répétés rapides. Permet un clic par 500ms ou similaire. Cela peut être correct dans certains cas, mais pas par exemple. Si vous avez un tireur ou des boutons fléchés pour permettre au déplacement rapide de l'élément à l'élément.
La solution la plus facile est la suivante: Cet appels L'exemple comparatif de travail est ici: http://jsbin.com/meluyevisi/1/ .
La boîte verte empêche, la boîte rouge permet. fn_start () < / Code> (la fonction de rappel réelle) Chaque fois que Touch est démarré, mais évite les zooms par défaut, etc.
Si quelqu'un a besoin d'une solution sans jQuery, j'ai trouvé celui-ci ( https://exceptionShub.com/disable-double-tap-zoom-option-in-Browser-on-touch-devices.html ) Très bien. La fonction s'attend et l'objet événement comme paramètre:
Component
clicked(event) {
this.preventZoom(event);
// your code
}
preventZoom(e) {
var t2 = e.timeStamp;
var t1 = e.currentTarget.dataset.lastTouch || t2;
var dt = t2 - t1;
var fingers = e.touches?.length;
e.currentTarget.dataset.lastTouch = t2;
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault();
e.target.click();
}