移动端canvas场景下第二次mousedown点击事件无法触发问题求助

问题根因 #

• 移动端的mousedown等鼠标事件是浏览器模拟触发的，会和原生触摸事件、浏览器默认触摸行为（长按菜单、滚动、缩放）冲突，容易出现事件被劫持丢弃的情况。你之前添加的cursor: pointer仅对桌面端光标生效，对移动端触摸事件无任何作用。
• 事件状态未正确重置：第一次选中tile后留存的状态没有做超时/中断重置逻辑，第二次事件被丢弃后状态残留，第三次点击时就会直接用残留的第一次状态和最新触发的第三次坐标执行交换逻辑，符合你描述的异常现象。
• 你注释提到尝试过pointer*系列事件但没有生效，大概率是没有移除原有鼠标事件，两类事件同时绑定触发了逻辑冲突，也没有禁用浏览器默认触摸行为导致事件依然被劫持。

修复方案 #

1. 禁用浏览器默认触摸干扰 #

在canvas的CSS样式中添加touch-action: none，禁止浏览器对canvas区域的所有默认触摸行为，从根源避免事件被劫持：

canvas {
  touch-action: none;
  /* 保留你原有其他样式 */
}

同时确认页面的viewport meta配置禁止缩放，避免双击缩放逻辑干扰事件触发：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 统一使用PointerEvent处理全端交互 #

移除原有鼠标事件绑定，统一使用标准PointerEvent实现全端适配，避免多套事件逻辑冲突，同时添加pointercapture保证事件链路完整：

// 移除原有鼠标事件，避免冲突
canvas.removeEventListener('mousemove', onMouseMove);
canvas.removeEventListener('mousedown', onMouseDown);
canvas.removeEventListener('mouseup', onMouseUp);
canvas.removeEventListener('mouseout', onMouseOut);

// 绑定全端通用Pointer事件
canvas.addEventListener('pointerdown', onPointerDown);
canvas.addEventListener('pointermove', onPointerMove);
canvas.addEventListener('pointerup', onPointerUp);
canvas.addEventListener('pointercancel', onPointerUp); // 事件中断时复用up逻辑重置状态

事件处理逻辑示例：

function onPointerDown(e) {
  e.preventDefault();
  // 绑定指针捕获，确保后续移动、抬起事件都被canvas接收
  canvas.setPointerCapture(e.pointerId);
  // 原有mousedown的选中tile逻辑，坐标可直接使用e.offsetX/e.offsetY
}

function onPointerUp(e) {
  e.preventDefault();
  canvas.releasePointerCapture(e.pointerId);
  // 原有mouseup的交换判断逻辑
  // 【重要】无论交换是否成功，执行完成后强制清空所有临时选中状态
  selectedTile = null;
}

3. 补充坐标转换校验 #

如果canvas的CSS显示宽高和canvas元素自身的width/height属性值不一致，不要直接使用offsetX获取坐标，改用getBoundingClientRect做坐标转换，避免坐标计算偏差：

const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 用转换后的x、y计算对应tile的坐标

内容的提问来源于stack exchange，提问作者r.kashigin