Désactiver le double clic sur “zoom” dans le navigateur sur les appareils tactiles

Je souhaite désactiver la fonctionnalité de double-clic sur les éléments spécifiés dans le navigateur (sur les appareils tactiles), sans désactiver toutes les fonctionnalités de zoom .

Par exemple: un élément peut être exploité plusieurs fois pour que quelque chose se produise. Cela fonctionne bien sur les navigateurs de bureau (comme prévu), mais sur les navigateurs de périphériques tactiles, il effectuera un zoom avant.

 Site  etc...  

Je l’ai utilisé très récemment et cela fonctionne très bien sur iPad. Je n’ai pas testé sur Android ou sur d’autres appareils (car le site Web sera affiché uniquement sur iPad).

Je sais que cela peut être vieux, mais j’ai trouvé une solution qui fonctionnait parfaitement pour moi. Pas besoin d’étiquettes méta folles et d’arrêter le zoom sur le contenu.

Je ne suis pas sûr à 100% de la nature du périphérique , mais ça a fonctionné exactement comme je le voulais.

 $('.no-zoom').bind('touchend', function(e) { e.preventDefault(); // Add your code here. $(this).click(); // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking. }) 

Cela désactive simplement la fonction de frappe normale, puis appelle à nouveau un événement de clic standard. Cela empêche le périphérique mobile de zoomer, mais fonctionne normalement.

EDIT: Cela a maintenant été testé et exécuté dans quelques applications en direct. Semble être 100% multi-navigateur et plate-forme. Le code ci-dessus doit fonctionner comme une solution de copier-coller dans la plupart des cas, à moins que vous ne souhaitiez un comportement personnalisé avant l’événement click.

Je voulais juste répondre correctement à ma question car certaines personnes ne lisent pas les commentaires sous une réponse. Alors voilà:

 (function($) { $.fn.nodoubletapzoom = function() { $(this).bind('touchstart', function preventZoom(e) { var t2 = e.timeStamp , t1 = $(this).data('lastTouch') || t2 , dt = t2 - t1 , fingers = e.originalEvent.touches.length; $(this).data('lastTouch', t2); if (!dt || dt > 500 || fingers > 1) return; // not double-tap e.preventDefault(); // double tap - prevent the zoom // also synthesize click events we just swallowed up $(this).sortinggger('click').sortinggger('click'); }); }; })(jQuery); 

Je n’ai pas écrit ceci, je viens de le modifier. J’ai trouvé la version iOS uniquement ici: https://gist.github.com/2047491 (merci Kablam)

Si vous avez besoin d’une version qui fonctionne sans jQuery , j’ai modifié la réponse de Wouter Konecny (qui a également été créée en modifiant ce texte par Johan Sundström ) pour utiliser du JavaScript vanilla.

 function 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(); } 

Vous devez définir l’ touch-action propriété css sur none comme décrit dans cette autre réponse https://stackoverflow.com/a/42288386/1128216

 .disable-doubletap-to-zoom { touch-action: none; } 

La simple prévention du comportement par défaut des événements click , dblclick ou touchend désactive la fonctionnalité de zoom.

Si vous avez déjà un rappel sur l’un de ces événements, appelez simplement event.preventDefault() .

Cela empêchera le double tap zoom sur les éléments dans le «corps», cela peut être changé pour tout autre sélecteur

 $('body').bind('touchstart', function preventZoom(e){ var t2 = e.timeStamp; var t1 = $(this).data('lastTouch') || t2; var dt = t2 - t1; var fingers = e.originalEvent.touches.length; $(this).data('lastTouch', t2); if (!dt || dt > 500 || fingers > 1){ return; // not double-tap } e.preventDefault(); // double tap - prevent the zoom // also synthesize click events we just swallowed up $(e.target).sortinggger('click'); }); 

Mais cela empêchait aussi mon événement de clic de se déclencher lorsque je cliquais plusieurs fois, donc je devais lier un autre événement pour déclencher les événements sur plusieurs clics.

 $('.selector').bind('touchstart click', preventZoom(e) { e.stopPropagation(); //stops propagation if(e.type == "touchstart") { // Handle touchstart event. } else if(e.type == "click") { // Handle click event. } }); 

Sur touchstart, j’ai ajouté le code pour empêcher le zoom et déclencher un clic.

 $('.selector').bind('touchstart, click', function preventZoom(e){ e.stopPropagation(); //stops propagation if(e.type == "touchstart") { // Handle touchstart event. var t2 = e.timeStamp; var t1 = $(this).data('lastTouch') || t2; var dt = t2 - t1; var fingers = e.originalEvent.touches.length; $(this).data('lastTouch', t2); if (!dt || dt > 500 || fingers > 1){ return; // not double-tap } e.preventDefault(); // double tap - prevent the zoom // also synthesize click events we just swallowed up $(e.target).sortinggger('click'); } else if(e.type == "click") { // Handle click event. "Put your events for click and touchstart here" } }); 

S’il y a quelqu’un comme moi qui rencontre ce problème avec Vue.js , append simplement .prevent fera l’affaire: @click.prevent="someAction"

Je suppose que j’ai une zone de conteneur d’entrée

avec du texte, des curseurs et des boutons, et que je veux empêcher les doubles frappes accidentelles dans cette

. Ce qui suit n’empêche pas le zoom sur la zone de saisie et ne concerne pas le double-clic et le zoom en dehors de ma zone

. Il existe des variantes selon l’application du navigateur.

Je viens de l’essayer.

(1) Pour Safari sur iOS et Chrome sur Android, c’est la méthode préférée. Fonctionne à l’exception de l’application Internet sur Samsung, où elle désactive le double clic, pas sur le

complet, mais au moins sur les éléments qui gèrent les taps. Il retourne return false , avec une exception sur les entrées text et range .

 $('selector of 
input area').on('touchend',disabledoubletap); function disabledoubletap(ev) { var preventok=$(ev.target).is('input[type=text],input[type=range]'); if(preventok==false) return false; }

(2) En option, pour l’application Internet intégrée sur Android (5.1, Samsung), inhibe les doubles pressions sur la

, mais empêche le zoom sur la

:

 $('selector of 
input area').on('touchstart touchend',disabledoubletap);

(3) Pour Chrome sur Android 5.1, désactive le double-clic, n’empêche pas le zoom et ne fait rien pour appuyer deux fois sur les autres navigateurs. Le double tap-inhiber du est irritant, car semble être une bonne pratique.

  

J’ai eu du mal avec cela parce que je devais créer un écran tactile public et aucune de ces solutions ne fonctionnait pour moi, j’ai utilisé les touch-events css: aucune pour éliminer complètement tous les événements tactiles. Il ne m’a fallu que 2 heures pour trouver cette solution, et il ne rest qu’une ligne de CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Et c’est parti