Search code examples
javascriptecmascript-6mobile-websitepointer-events

Detect two finger touch with PointerEvents on the same target

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 :)

Solution

  • 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