5

I've got an library that allows drawing on a canvas. Currently, it supports mouse and touch events. I'd like to add support for pointer events as well.

I'm handling pointerdown, pointermove and pointerup events on the canvas element. Everything works fine in Chrome on my laptop when I use mouse. However, when I try it out on my tablet, I'm only getting a few pointermove events (2-5) before getting pointercancel event followed by pointerout and pointerleave.

I guess the browser is triggering pointercancel, because moving my finger over the canvas triggers scrolling of the whole page as well.

To disable scrolling when using touch events, I'm calling event.preventDefault() in handlers for touchstart and touchmove events, but this solution doesn't seem to be working with pointer events.

How to disable scrolling of the whole page when I draw over the canvas element when using pointer events?

1
  • Have you tried .stopPropagation() ? May 13, 2018 at 17:20

1 Answer 1

8

Have you tried the CSS property touch-action: none? It disables any kind of user-agent behavior (like scrolling) on an element.

For more fine grained options checkout the MDN article for touch-action.

2
  • Thanks! I'm setting it when browser is using touch events, but completely forgot about it and I didn't set it up for pointer events.
    – szimek
    May 13, 2018 at 20:07
  • What if I want to disable scrolling conditionally, e.g. when a specific place is tapped?
    – Finesse
    Mar 19, 2021 at 4:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.