在移动端 Web 应用中，需防止 touchstart 后误触发 mousedown 事件，同时不干扰用户自然滑动（scroll）行为；核心方案是通过标志位协同管理触摸与鼠标事件时序，避免调用 event.preventDefault() 干预默认滚动。
在移动端 web 应用中，需防止 touchstart 后误触发 mousedown 事件，同时不干扰用户自然滑动（scroll）行为；核心方案是通过标志位协同管理触摸与鼠标事件时序，避免调用 `event.preventdefault()` 干预默认滚动。
在触控设备上，浏览器为兼容旧有鼠标逻辑，常在 touchstart / touchend 之后自动派发一次 mousedown 事件（称为“touch-to-mouse fallback”）。若直接在 touchstart 中调用 event.preventDefault()，虽可阻止该 mousedown，但也会禁用页面默认滚动行为——这正是你遇到的核心矛盾。
✅ 正确解法：不阻止事件，而是“过滤”冗余的 mousedown
通过一个轻量状态标志（如 touchEventHasBeenTriggered），在 touchend 时置为 true，并在 mousedown 处理器中检查该标志——若为 true，说明本次 mousedown 是触摸操作的副作用，直接 return 跳过处理；随后立即将标志重置为 false，确保下一次触摸操作仍能正常触发后续逻辑。
以下是优化后的完整事件处理代码：
let touchPressed = false;
let touchEventHasBeenTriggered = false;
canvas.addEventListener('touchstart', function (event) {
touchPressed = true;
// ✅ 不调用 preventDefault() → 滚动完全不受影响
const touch = event.targetTouches[event.targetTouches.length - 1];
userInput(touch.clientX, touch.clientY);
});
canvas.addEventListener('touchend', function () {
touchPressed = false;
touchEventHasBeenTriggered = true; // 标记本次触摸已结束
});
canvas.addEventListener('mousedown', function (event) {
// ✅ 仅过滤由触摸触发的“伪”mousedown，真实鼠标点击仍生效
if (touchEventHasBeenTriggered) {
touchEventHasBeenTriggered = false; // 重置，支持连续交互
return; // 忽略该次mousedown
}
userInput(event.clientX, event.clientY);
});⚠️ 注意事项：
-
不要在
touchstart中调用preventDefault()（除非你明确需要禁用缩放/滚动），这是保障滚动流畅性的前提； -
touchEventHasBeenTriggered的设置时机必须在touchend（而非touchstart），否则快速连续点击可能漏判； - 该方案对真实鼠标操作（如桌面端或外接鼠标）完全无影响，
mousedown始终正常触发； - 若需兼容
pointer事件，建议统一迁移到pointerdown+pointerup，并设置touch-action: none精细控制默认行为（但需谨慎评估滚动需求）。
总结：事件去重 ≠ 事件阻止。通过状态协同实现“语义过滤”，既消除了多点触摸导致的事件竞争问题，又完整保留了原生滚动体验——这才是移动端交互开发中的健壮实践。
