I'm currently developing a Telegram mini app and I've run into an issue where users can't click on objects with more than one finger. I would like to find a way to make this possible.
My tech stack includes the latest React with Next.js and Tailwind CSS for styling.
Here's how my current setup looks:
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>
Specifically, I am looking for a solution that allows users to tap with 2-3-4 fingers simultaneously and handle these taps efficiently.
Additionally, I want users to be able to click while moving the mouse (on desktop) without needing to wait for it to stop.
It would also be helpful to retrieve information about the coordinates of these simultaneous clicks.
If you have any insights or solutions to achieve any of these requirements, please do share! Thank you!
I have tried setting up 'cursor-pointer' and handling `e.detail`, but I am unsure of what steps to take next.
Your assistance is greatly appreciated.