preventdefault et stoppropagation ne fonctionne pas avec pointermove

Question

Je fais une application pour dessiner à l'intérieur d'un HTML5 canvas, mais je ne peux pas le faire à partir du mobile ou de la tablette.

Je ne peux pas éviter de défilement natif ou chrome rafraîchissement du navigateur lorsque poussé vers le bas

J'ai créé un exemple dans jsfiddle afin que vous puissiez le voir.

Answer 1

Pour supprimer le comportement UA par défaut, vous devez ajouter la propriété CSS touch-action: none à l'élément canvas.

touch-action Spécifie si et comment un élément HTML doit répondre aux mouvements. Avec touch-action: none, aucun comportement UA n'est déclenché (par exemple glisser ou zoomer). La propriété par défaut est touch-action: auto, ce qui permet de déclencher tout comportement UA.

Answer 2

Cela ressemble à un véritable bug de Chrome, que je rapporterai en utilisant votre exemple de code. Définir une action tactile en CSS n'est pas une solution si vous voulez décider en JavaScript de gérer dynamiquement le pointerMove avec votre propre code par rapport à la gestion native du navigateur.

Si vous définissez une action tactile: "none", la gestion native du navigateur ne sera jamais exécutée. Inversement, comme vous l'avez signalé, ne pas avoir de paramètre d'action tactile, équivalent à la valeur par défaut "auto", ne fonctionnera pas car Chrome ignore les appels à preventDefault() sur pointerMove et appelle toujours pointerCancel - un bogue.

Notez que si vous avez ajouté un écouteur pour touchMove à la place, en utilisant l'indicateur passif: false, alors preventDefault() fonctionnerait comme prévu, en évitant TouchCancel. Cependant, vous devez utiliser des écouteurs d'événement souris et d'événement tactile distincts, ce que vous essayez d'éviter en utilisant des événements de pointeur.