web-dev-qa-db-fra.com

Désactivez l'option "zoom" du double-clic dans le navigateur sur les appareils tactiles

Je veux désactiver le zoom à double frappe fonctionnalité sur des é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 d'appareils tactiles, il effectue un zoom avant.

htmlbrowsertouchzoom
69
Wouter Konecny

Je voulais juste répondre correctement à ma question car certaines personnes ne lisent pas les commentaires ci-dessous une réponse. Alors la voici:

(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).trigger('click').trigger('click');
      });
  };
})(jQuery);

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

28
Wouter Konecny
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
etc...
</head>

Je l'ai utilisé très récemment et cela fonctionne bien sur iPad. N'a pas été testé sur Android ou d'autres appareils (car le site Web ne sera affiché que sur iPad).

43
Kablam

Je sais que c'est peut-être vieux, mais j'ai trouvé une solution qui me convenait parfaitement. Pas besoin de balises méta folles et d'arrêter le zoom de contenu. 

Je ne suis pas sûr à 100% de la diversité des appareils, mais cela 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ésactivera simplement la fonction de frappe normale, puis appellera à nouveau un événement de clic standard. Cela empêche le périphérique 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 devrait fonctionner comme une solution copier-coller dans la plupart des cas, sauf si vous souhaitez un comportement personnalisé before l'événement click.

32
Rockster160

Ajoutez touch-action: manipulation à tout élément pour lequel vous souhaitez désactiver le zoom à double toucher, comme avec la classe disable-dbl-tap-zoom suivante:

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

Depuis le touch-action docs (emphase mienne):

manipulation

Activez les mouvements de panoramique et de zoom par pincement, mais désactivez par des mouvements non standard supplémentaires tels que appuyez deux fois pour zoomer.

J'ai essayé d'autres réponses sur cette page, mais c'est la solution la plus simple et la plus fiable. Cette valeur fonctionne sur Android et iOS.

12
Ross Allen

Si vous avez besoin d'une version qui fonctionne sans jQuery, j'ai modifié la réponse de Wouter Konecny ​​ (créée également en modifiant this Gist de Johan Sundström ) pour utiliser Vanilla JavaScript .

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

Ajoutez ensuite un gestionnaire d’événements sur touchstart qui appelle cette fonction:

myButton.addEventListener('touchstart', preventZoom);
11
Evrim Persembe

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

.disable-doubletap-to-zoom {
    touch-action: none;
}
7
Jonathan Morales Vélez

CSS pour désactiver le zoom double de manière globale (sur n'importe quel élément): 

  * {
      touch-action: manipulation;
  }

manipulation

Activez les gestes de panoramique et de zoom par pincement, mais désactivez les gestes non standard supplémentaires tels que cliquer deux fois pour zoomer.

Merci Ross, ma réponse étend sa: https://stackoverflow.com/a/53236027/9986657

2
Jan

Empêcher simplement le 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().

1
William Grasel

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

0
Sølve Tornøe

Cela empêchera le double-clic de zoomer sur les éléments dans 'corps', cela peut être changé en un 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).trigger('click');

});

Mais cela a également empêché mon événement de clic de se déclencher lorsque je cliquais plusieurs fois.

$('.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).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });
0
Dally S