Ich habe eine Seite mit einem Abschnitt, in dem eine Zeichnung skizziert werden kann. Die Touchmove-Ereignisse, zumindest die vertikalen, scrollen jedoch auch durch die Seite (was das Skizzieren beeinträchtigt), wenn sie in einem mobilen Browser verwendet werden. Gibt es eine Möglichkeit, entweder a) das Scrollen der Seite zu deaktivieren und wieder zu aktivieren (damit ich sie deaktivieren kann, wenn jede Zeile gestartet wird, aber nach jeder Zeile wieder einschalten kann) oder b) die Standardbehandlung von zu deaktivieren Touchmove-Ereignisse (und vermutlich das Scrollen), die auf die Leinwand gehen, auf der die Skizze gezeichnet ist (ich kann sie nicht einfach vollständig deaktivieren, da sie beim Skizzieren verwendet werden)?
Ich habe für die Skizze jquery-mobile vmouse-Handler verwendet, wenn das einen Unterschied macht.
Update : Wenn ich auf einem iPhone die zu skizzierende Leinwand auswähle oder vor dem Zeichnen nur ein wenig mit dem Finger halte, wird die Seite nicht gescrollt und nicht aufgrund von irgendetwas, das ich auf der Seite codiert habe.
quelle
Antworten:
Setzen Sie die CSS-Eigenschaft touch-action auf
none
, die auch mit passiven Ereignis-Listenern funktioniert :Das Anwenden dieser Eigenschaft auf ein Element löst nicht das Standardverhalten (Bildlauf) aus, wenn das Ereignis von diesem Element ausgeht .
quelle
touchstart
Ereignisse zu töten , die nicht nützlich sind, wenn Sie Berührungsereignisse erkennen, aber kein Scrollen zulassen möchten.touchstart
.Ähnlich wie bei der Antwort von @Llepwryd habe ich eine Kombination aus
ontouchstart
und verwendetontouchmove
, um das Scrollen zu verhindern, wenn es sich auf einem bestimmten Element befindet.Entnommen wie es ist aus einem meiner Projekte:
window.blockMenuHeaderScroll = false; $(window).on('touchstart', function(e) { if ($(e.target).closest('#mobileMenuHeader').length == 1) { blockMenuHeaderScroll = true; } }); $(window).on('touchend', function() { blockMenuHeaderScroll = false; }); $(window).on('touchmove', function(e) { if (blockMenuHeaderScroll) { e.preventDefault(); } });
Im Wesentlichen höre ich beim Start der Berührung zu, um zu sehen, ob sie mit jQuery an einem Element beginnt, das einem anderen Kind untergeordnet ist,
.closest
und erlaube, dass die Berührungsbewegung beim Scrollen ein- und ausgeschaltet wird. Dase.target
bezieht sich auf das Element, mit dem der Touch-Start beginnt.Sie möchten die Standardeinstellung für das Touch-Move-Ereignis verhindern, müssen jedoch auch Ihre Markierung am Ende des Touch-Ereignisses löschen, da sonst keine Touch-Scroll-Ereignisse funktionieren.
Dies kann ohne jQuery erreicht werden. Für meine Verwendung hatte ich jedoch bereits jQuery und musste nichts codieren, um festzustellen, ob das Element ein bestimmtes übergeordnetes Element hat.
Getestet in Chrome auf Android und einem iPod Touch ab dem 18.06.2013
quelle
$(".carousel").on('touchstart', function (e) { e.preventDefault(); });
was ein Auf- und Ab-Scrollen auf meinem Karussell verhindert :)Es gibt einen kleinen "Hack" in CSS, mit dem Sie auch das Scrollen deaktivieren können:
.lock-screen { height: 100%; overflow: hidden; width: 100%; position: fixed; }
Durch Hinzufügen dieser Klasse zum Textkörper wird das Scrollen verhindert.
quelle
document.addEventListener('touchstart', function(e) {e.preventDefault()}, false); document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
Dies sollte das Scrollen verhindern, aber es werden auch andere Berührungsereignisse unterbrochen, sofern Sie keine benutzerdefinierte Methode zum Behandeln dieser Ereignisse definieren.
quelle
{passive: false}
document.addEventListener('touchstart', handleEndEventFn, { passive: false });
touchmove
aber anstatt den Ereignislistener an das Dokument zu binden, das direkte Binden an das Canvas-Element dazu beigetragen hat, das Scrollen bei Verwendung des Canvas zu verhindern, abertouchstart
funktionieren durfte , da ich es nicht verhindert habe.document.removeEventListener('touchmove', handleFn)
, aber es funktioniert nicht.Die ultimative Lösung wäre Einstellung
overflow: hidden;
aufdocument.documentElement
etwa so:/* element is an HTML element You want catch the touch */ element.addEventListener('touchstart', function(e) { document.documentElement.style.overflow = 'hidden'; }); document.addEventListener('touchend', function(e) { document.documentElement.style.overflow = 'auto'; });
Durch die Einstellung
overflow: hidden
beim Start der Berührung wird alles, was über das Fenster hinausgeht, ausgeblendet, wodurch die Verfügbarkeit zum Scrollen aufgehoben wird (kein zu scrollender Inhalt).Nach
touchend
dem Sperren kann durch Setzenoverflow
aufauto
(der Standardwert) freigegeben werden .Es ist besser, dies anzuhängen,
<html>
da dies<body>
möglicherweise zum Stylen verwendet wird und Kinder sich unerwartet verhalten können.BEARBEITEN: Info
touch-action: none;
- Safari unterstützt es laut MDN nicht .quelle
Versuchen Sie, den Überlauf auf dem Objekt zu verbergen, das Sie nicht scrollen möchten, während ein Berührungsereignis stattfindet. Setzen Sie z. B. den Überlauf beim Start ausgeblendet und am Ende wieder auf Auto.
Hast Du es versucht ? Es würde mich interessieren, ob dies funktionieren würde.
document.addEventListener('ontouchstart', function(e) { document.body.style.overflow = "hidden"; }, false); document.addEventListener('ontouchmove', function(e) { document.body.style.overflow = "auto"; }, false);
quelle
Ich fand, dass das
ev.stopPropagation();
für mich funktioniert hat.quelle
Zu meiner Überraschung funktioniert die Methode "prepareDefault ()" für mich unter dem neuesten Google Chrome (Version 85) unter iOS 13.7. Es funktioniert auch auf Safari auf demselben Gerät und auch auf meinem Android 8.0-Tablet. Ich habe es derzeit für die 2D-Ansicht auf meiner Website hier implementiert: https://papercraft-maker.com
quelle