Search code examples
javascripthtml5-canvaspointer-events

preventdefault and stoppropagation not working with pointermove


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.


Solution

  • 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.