触摸设备拖拽绘制时，无法连续识别div单元格的问题求助

问题描述 #

• 基于<div>元素实现网格画板，每个单元格为独立<div>，最大支持100x100尺寸
• 鼠标操作绘制流畅，但触摸设备上拖拽时，仅首个被触摸的<div>会被上色，后续经过的单元格无法被识别，无法绘制连续线条

已尝试的无效措施：

• 在父级画板容器添加touchstart和touchmove事件监听器
• 阻止touchstart默认事件

原因分析 #

1. 触摸事件目标固定：触摸操作中，pointermove事件的目标始终是初始触摸触发的那个<div>，不会随手指移动切换到新的单元格——这是触摸事件的特性，与鼠标事件会随指针位置更新目标元素的逻辑不同。
2. 事件绑定逻辑冗余且低效：循环中重复调用querySelectorAll绑定事件，不仅浪费内存，且每个单元格的pointermove仅能捕获自身触发的事件，无法响应拖拽经过的其他单元格。
3. 触摸默认行为未完全拦截：仅阻止touchstart默认行为不足以消除浏览器滚动、缩放等操作对事件传递的干扰。

解决方法 #

方案1：父容器事件委托+坐标计算（推荐） #

放弃给每个单元格单独绑定事件，改为在画板容器上统一监听指针事件，通过触摸/鼠标位置计算对应的单元格，实现鼠标与触摸的统一处理：

function drawBoard(gridSize = 16) {
  boardContainer.innerHTML = "";
  const boardSize = boardContainer.clientHeight;
  const cellSize = boardSize / gridSize;
  let isDrawing = false;

  // 创建网格并标记单元格坐标
  for (let i = 0; i < gridSize; i++) {
    const row = document.createElement("div");
    row.style.display = "flex";
    for (let j = 0; j < gridSize; j++) {
      const column = document.createElement("div");
      column.classList.add("board-element");
      column.style.width = `${cellSize}px`;
      column.style.height = `${cellSize}px`;
      column.dataset.row = i;
      column.dataset.col = j;
      row.appendChild(column);
    }
    boardContainer.appendChild(row);
  }

  // 统一监听指针事件
  boardContainer.addEventListener("pointerdown", (e) => {
    isDrawing = true;
    drawAtPosition(e);
  });

  boardContainer.addEventListener("pointermove", (e) => {
    if (isDrawing) drawAtPosition(e);
  });

  boardContainer.addEventListener("pointerup", () => isDrawing = false);
  boardContainer.addEventListener("pointerleave", () => isDrawing = false);

  // 完整阻止触摸默认行为，避免滚动干扰
  boardContainer.addEventListener("touchstart", (e) => e.preventDefault());
  boardContainer.addEventListener("touchmove", (e) => e.preventDefault());

  // 根据坐标定位单元格并绘制
  function drawAtPosition(e) {
    const rect = boardContainer.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const col = Math.floor(x / cellSize);
    const row = Math.floor(y / cellSize);

    // 边界校验，避免越界
    if (col >= 0 && col < gridSize && row >= 0 && row < gridSize) {
      const cell = boardContainer.querySelector(`[data-row="${row}"][data-col="${col}"]`);
      if (cell) {
        // 替换为你的绘制逻辑，比如添加颜色类或修改背景色
        cell.style.backgroundColor = "#000";
      }
    }
  }
}

关键优化点：

• 事件委托：仅在父容器绑定事件，减少内存占用，避免循环绑定的冗余操作
• 坐标定位：绕过触摸事件目标固定的限制，直接通过指针位置计算对应单元格
• 跨设备兼容：pointer事件原生兼容鼠标与触摸，无需单独区分处理
• 完整拦截默认行为：同时阻止touchstart和touchmove的默认行为，消除浏览器滚动、拖拽的干扰

方案2：修正原有事件绑定逻辑 #

若坚持给每个单元格绑定事件，可通过父容器的pointermove动态检测指针经过的单元格：

function drawBoard(gridSize = 16) {
  boardContainer.innerHTML = "";
  const boardSize = boardContainer.clientHeight;
  const cellSize = boardSize / gridSize;
  let isDrawing = false;

  // 创建网格
  for (let i = 0; i < gridSize; i++) {
    const row = document.createElement("div");
    row.style.display = "flex";
    for (let j = 0; j < gridSize; j++) {
      const column = document.createElement("div");
      column.classList.add("board-element");
      column.style.width = `${cellSize}px`;
      column.style.height = `${cellSize}px`;
      row.appendChild(column);
    }
    boardContainer.appendChild(row);
  }

  // 单元格绑定pointerdown事件启动绘制
  document.querySelectorAll(".board-element").forEach(element => {
    element.addEventListener("pointerdown", () => {
      isDrawing = true;
      draw(element);
    });
    element.addEventListener("dragstart", (e) => e.preventDefault());
  });

  // 父容器监听pointermove，动态检测经过的单元格
  boardContainer.addEventListener("pointermove", (e) => {
    if (!isDrawing) return;
    const target = document.elementFromPoint(e.clientX, e.clientY);
    if (target?.classList.contains("board-element")) {
      draw(target);
    }
  });

  boardContainer.addEventListener("pointerup", () => isDrawing = false);
  boardContainer.addEventListener("pointerleave", () => isDrawing = false);
  boardContainer.addEventListener("touchstart", (e) => e.preventDefault());
  boardContainer.addEventListener("touchmove", (e) => e.preventDefault());

  // 绘制逻辑
  function draw(element) {
    // 可添加重复绘制判断，避免重复操作
    if (element.style.backgroundColor !== "#000") {
      element.style.backgroundColor = "#000";
    }
  }
}

注意事项：

• elementFromPoint在触摸设备上依赖pointer事件的clientX/clientY坐标，需确保事件对象正确
• 建议添加重复绘制判断，避免同一单元格被多次修改，提升性能

内容的提问来源于stack exchange，提问作者Tim