javascript - preventdefault and stoppropagation not working with pointermove - Stack Overflow

admin管理员组

文章数量:1318580

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.

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.

• javascript
• html5-canvas
• pointer-events

Share Improve this question Follow edited Jan 4, 2017 at 17:53 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Jan 4, 2017 at 17:15 DiV666DiV666 10922 silver badges1212 bronze badges 1

• Please provide all relevant code in an minimal reproducible example in the question itself, not on a third-party site. – Heretic Monkey Commented Jan 4, 2017 at 17:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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.

本文标签： javascriptpreventdefault and stoppropagation not working with pointermoveStack Overflow