Trouble detecting touched elements within a div while dragging on touchscreen

Question

I'm currently working on implementing a drawing board within a <div> element, where users can draw by dragging their fingers across the grid on touchscreen devices. The grid has a maximum size of 100x100, and each cell is represented by a <div> 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 <div> element within the board and drags their finger across, only the first touched <div> 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 <div> (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 div 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 <canvas> tag. I want to understand why this does not work and how to fix that

function drawBoard(gridSize = 16) {
 // Clear previous board
 boardContainer.innerHTML = "";
 const boardSize = boardContainer.clientHeight;
 for (let i = 0; i < gridSize; i++) {
 const row = document.createElement("div");
 for (let j = 0; j < gridSize; j++) {
 const column = document.createElement("div");
 column.classList.add("board-element");
 column.style.width = boardSize / gridSize + "px";
 column.style.height = boardSize / gridSize + "px";
 row.appendChild(column);
 }
 boardContainer.appendChild(row);
 // Adds event listeners to each created board element
 const boardElements = document.querySelectorAll(".board-element");
 boardElements.forEach((boardElement) => {
 boardElement.addEventListener("pointerdown", () => {
 isDrawing = true;
 });
 boardElement.addEventListener("pointermove", (e) => {
 if (isDrawing) {
 draw(e);
 }
 });
 boardElement.addEventListener("pointerup", () => {
 isDrawing = false;
 });
 // Prevents default dragging event from happening, to draw more fluidly
 boardElement.addEventListener("dragstart", (e) => {
 e.preventDefault();
 });
 });
 }
 boardContainer.addEventListener("pointerleave", () => {
 isDrawing = false;
 });
 boardContainer.addEventListener("pointerenter", (e) => {
 // If mouse is clicked
 if (e.buttons === 1) {
 isDrawing = true;
 }
 });
 boardContainer.addEventListener("touchstart", (e) => {
 e.preventDefault();
 });
}

• Rory McCrossan: It's going to be exceptionally difficult for us to debug code that you've not shown us
• John Smith: If you don't mind me asking, is there any particular reason not to use a <canvas>?
• A-Tech: Hello @Tim welcome to SO. This site works a bit different than others. You might want to read this tutorial. The TLDR of it is that you should add the question relevant code to your question directly not as a link. In your case that would be the html for the element the users draw on and the JS for the relevant event-handling you added so far. If at first your answers aren't well received do not be discouraged from asking in the future. This site has quiet the learning curve.
• Tim: @JohnSmith I found out late about canvas. I do intend on branching out and explore canvas later, but for now i just want to understand how i can get control over the touchevents
• Community: Please provide enough code so others can better understand or reproduce the problem.