2017-01-04 3 views
0

Ich mache eine App in HTML5 canvas zu zeichnen, aber ich kann es nicht von der mobilen oder Tablet tun.prepatdefault und stoppropagation funktioniert nicht mit pointermove

Ich kann nicht den Browser des nativen Scroll- oder Chrom refresh vermeiden, wenn nach unten gedrückt

Ich habe ein Beispiel, in jsfiddle erstellt, damit Sie es sehen.

+0

Bitte geben Sie den relevanten Code in einem [mcve] in der Frage selbst an, nicht auf einer Website eines Drittanbieters. –

Antwort

1

Um das UA-Standardverhalten zu unterdrücken, müssen Sie dem Canvas-Element die CSS-Eigenschaft touch-action: none hinzufügen.

touch-action Gibt an, ob und wie ein HTML-Element auf Gesten reagieren soll. Mit touch-action: none wird kein UA-Verhalten ausgelöst (z. B. Ziehen oder Zoomen). Die Standardeigenschaft ist touch-action: auto, wodurch alle UA-Verhalten ausgelöst werden können.

+0

Super !!! Vielen Dank – DiV666

0

Das sieht wie ein echter Chrome-Bug aus, den ich mit Ihrem Beispielcode melden werde. Das Setzen einer Touch-Aktion in CSS ist keine Lösung, wenn Sie in JavaScript dynamisch entscheiden möchten, ob Sie den pointerMove mit Ihrem eigenen Code behandeln oder die native Browser-Handhabung zulassen.

Wenn Sie touch-action: "none" einstellen, wird die native Browserbehandlung nie ausgeführt. Umgekehrt funktionieren die Einstellungen für Berührungsaktionen, die dem Standardwert "auto" entsprechen, nicht, da Chrome Aufrufe von preventDefault() in pointerMove ignoriert und weiterhin pointerCancel aufruft - ein Fehler.

Hinweis: Wenn Sie stattdessen einen Listener für touchMove mit dem passiv: false-Flag hinzugefügt haben, funktioniert preventDefault() wie erwartet und vermeidet touchCancel. Allerdings müssen Sie dann separate Mausereignis- und Berührungsereignis-Listener verwenden, was Sie mit Zeigerereignissen zu vermeiden versuchen.

Verwandte Themen