React handle multiple clicks on mobile at the same time

Question

I am building telegram mini app, and there you can't click on object with more than one finger, however i would like to make that possible.

I'm using last react with nextjs. Tailwindcss for styles.

Right now my setup look's like this:

const handleClick = () => {
    console.log(e.detail);

    const card = e.currentTarget;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;

}

<div className="cursor-pointer" onClick={handleClick}></div>

For example when user tap's with 2-3-4 finger's at the same time and handle this tap's.

When user moves mouse (on desktop) and still can click. (Don't have to wait to stop moving)

Get info about coordinates of this click's. (2-3-4 at the same time)

If you know how to do any of these - please share with me! Thanks!

I try to set up 'cursor-pointer', tried to handle e.detail.

Don't know what to do.

Answer 1

You can do this by applying a touchstart event and calling your click function on it too, you should use the touches property on the event to ensure that this only triggers when there is more than one touch-points, in this case two fingers.

addEventListener("touchstart", (event) => {
if (event.touches.length > 1){
// Handle click function
}
});