I’m currently working on implementing a drawing board within a element, where users can draw by dragging their fingers across the grid on touchscreen devices. The grid has a maximum size of 100×100, and each cell is represented by a element.

While the drawing functionality works smoothly with a mouse, I’m encountering difficulties when trying to make it compatible with touchscreen devices. Specifically, when a user touches a element within the board and drags their finger across, only the first touched gets colored. Subsequent touches within the same touch movement are not detected, preventing the user from drawing continuous lines.

I’ve taken the following steps to address the issue:

• Added event listeners for “touchstart” and “touchmove” on the parent (referred to as the board).
• Prevented default events from occurring on “touchstart”, as I suspected this might be the cause of the problem.

I expected that these adjustments would enable touch events to behave similarly to mouse events, allowing users to draw on the grid seamlessly by dragging their fingers across the screen. However, despite these efforts, the touch functionality did not behave as expected, with only the first touched getting colored during a touch-drag action.

I tried searching for it on stackoverflow but could not really find a solution, mainly because most use the tag. I want to understand why this does not work and how to fix that