2

I have big HTML element on the screen (canvas) and I want to detect multi-touch events. With "touchstart" you have "touches" property, but with PointerEvents I don't know any way to know if multi-touch occurred (besides checking if there's more than 1 target, which obviously not possible when you have big elements on screen. Is it even possible?

some code for clarification:

canvas.addEventListener("pointerdown", (e) => {
    // is pointer down is multitouch?
});

VS.

canvas.addEventListener("touchstart", (e) => {
    console.log(e.touches.length);
});

Thanks a lot :)

Wild Beard
  • 2,919
  • 1
  • 12
  • 24
kutomer
  • 734
  • 8
  • 17
  • Just commenting that HammerJS might help you accomplish this. I'm not familiar with the native touchevents but have found HammerJS very easy to use: http://hammerjs.github.io/ – mwilson Jun 20 '18 at 19:47

1 Answers1

4

With a PointerEvent, you'd have to cache the event on pointerdown and uncache it on pointerup.

Anything more I'd say would just be copying what MDN has already with exact examples: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Multi-touch_interaction

Mitchell Simoens
  • 2,516
  • 2
  • 20
  • 29
  • The MDN solution works — but — it's possible for system interruptions (e.g. modal pop-overs) or parent/child elements capturing `pointerup` events to prevent the cache from disposing of a pointer. This breaks the cache such that the it will forever indicate more fingers on screen than there are. Advise adding a clearCache function that you can call on some kind of gesture 'cancely' user input (like a tap on a button). – Ian Aug 31 '19 at 15:31