preventdefault and stoppropagation not working with pointermove

Question

I'm making an app to draw inside an HTML5 canvas, but I can not do it from the mobile or tablet.

I can not avoid the browser's native scroll or chrome refresh when pushed down

I have created an example in jsfiddle so you can see it.

Answer 1

To suppress default UA behaviour you need to add the CSS property touch-action: none to the canvas element.

touch-action specifies if and how a HTML element should respond to gestures. With touch-action: none no UA behaviour is triggered (e.g. dragging or zooming). The default property is touch-action: auto, which allows all UA behaviour to be triggered.

Answer 2

This looks like a genuine Chrome bug, which I will report using your sample code. Setting a touch-action in CSS isn't a solution if you want to dynamically decide in JavaScript whether to handle the pointerMove with your own code vs. allow the native browser handling.

If you set touch-action: "none", then the native browser handling will never run. Conversely, as you've reported, having no touch-action setting, which is equivalent to the default of "auto", won't work because Chrome ignores calls to preventDefault() on pointerMove and still calls pointerCancel - a bug.

Note that if you added a listener for touchMove instead, using the passive: false flag, then preventDefault() would work as expected, avoiding touchCancel. However, then you've got to use separate mouse event and touch event listeners, which is what you're trying to avoid by using pointer events.