it-swarm.com.de

Deaktivieren Sie die Doppeltaste "Zoom" im Browser auf Touch-Geräten

Ich möchte die doppelt-tippen Zoom -Funktion auf angegebenen Elementen im Browser (auf Touch-Geräten) deaktivieren, , ohne die Zoomfunktion zu deaktivieren.

Zum Beispiel: Ein Element kann mehrmals angetippt werden, damit etwas passiert. Dies funktioniert auf Desktop-Browsern einwandfrei (wie erwartet), bei Touch-Device-Browsern wird jedoch vergrößert.

69
Wouter Konecny

Ich wollte nur meine Frage richtig beantworten, da einige Leute die Kommentare unter einer Antwort nicht lesen. Hier ist es also:

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

Ich habe das nicht geschrieben, ich habe es nur modifiziert. Ich habe die reine iOS-Version hier gefunden: https://Gist.github.com/2047491 (Danke 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>

Ich habe das vor kurzem verwendet und es funktioniert gut auf dem iPad. Wurde nicht auf Android oder anderen Geräten getestet (da die Website nur auf dem iPad angezeigt wird).

43
Kablam

Ich weiß, dass dies vielleicht alt ist, aber ich habe eine Lösung gefunden, die perfekt für mich funktioniert hat. Keine verrückten Meta-Tags und kein Zoomen von Inhalten mehr nötig. 

Ich bin nicht zu 100% sicher, wie geräteübergreifend ist, aber es funktionierte genau so, wie ich es wollte.

$('.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.
})

Dadurch wird einfach die normale Abgriffsfunktion deaktiviert und ein Standard-Klickereignis erneut aufgerufen. Dies verhindert, dass das mobile Gerät zoomt, funktioniert aber ansonsten wie gewohnt.

BEARBEITEN: Dies wurde jetzt getestet und in einigen Live-Apps ausgeführt. Scheint 100% Cross-Browser und Plattform zu sein. Der obige Code sollte in den meisten Fällen als Copy-Paste-Lösung funktionieren, es sei denn, Sie möchten ein benutzerdefiniertes Verhalten vorher das Click-Ereignis.

32
Rockster160

Fügen Sie touch-action: manipulation zu jedem Element hinzu, für das Sie den Doppeltippen-Zoom deaktivieren möchten, beispielsweise mit der folgenden disable-dbl-tap-zoom-Klasse:

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

Aus dem touch-action docs (Hervorhebungsmethode):

manipulation

Aktivieren Sie Schwenk- und Zoom-Gesten, aber deaktivieren zusätzliche nicht standardmäßige Gesten wie zum Zoomen doppeltippen.

Ich habe andere Antworten auf dieser Seite ausprobiert, aber dies ist die einfachste und zuverlässigste Lösung. Dieser Wert funktioniert auf Android und iOS.

12
Ross Allen

Wenn Sie eine Version benötigen, die ohne jQuery funktioniert, habe ich Wouter Konecnys Antwort (die auch durch Modifizieren von dieser Gist von Johan Sundström erstellt wurde) geändert, um Vanilla JavaScript zu verwenden.

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

Fügen Sie dann einen Ereignishandler für touchstart hinzu, der diese Funktion aufruft:

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

Sie sollten die css-Eigenschaft touch-action auf none setzen, wie in dieser anderen Antwort beschrieben https://stackoverflow.com/a/42288386/1128216

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

CSS zum Deaktivieren des Doppeltippen-Zooms global (für jedes Element): 

  * {
      touch-action: manipulation;
  }

manipulation

Aktivieren Sie das Verschieben und Zoomen von Gesten, deaktivieren Sie jedoch weitere nicht standardmäßige Gesten, z.

Danke Ross, meine Antwort reicht aus: https://stackoverflow.com/a/53236027/9986657

2
Jan

Einfach verhindern, dass das Standardverhalten der Ereignisse click, dblclick oder touchend die Zoomfunktion deaktiviert.

Wenn Sie bereits einen Rückruf für eines dieser Ereignisse haben, rufen Sie einfach eine event.preventDefault() auf.

1
William Grasel

Wenn es jemanden wie mich gibt, bei dem dieses Problem mit Vue.js auftritt, wird Einfach durch Hinzufügen von .prevent der Trick ausgeführt: @click.prevent="someAction"

0
Sølve Tornøe

Dadurch wird verhindert, dass Elemente in 'body' doppelt gezoomt werden. Dies kann durch einen anderen Auswahlschalter geändert werden

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

});

Dies verhinderte jedoch auch, dass mein Klickereignis ausgelöst wurde, wenn es mehrmals angeklickt wurde. Daher musste ich ein anderes Ereignis binden, um die Ereignisse mit mehreren Klicks auszulösen

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

Bei Touchstart habe ich den Code hinzugefügt, um das Zoomen zu verhindern und einen Klick auszulösen.

$('.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