在移动端，关闭覆盖式对话框后常意外触发底层元素的 click 事件（如对话框重新弹出），根本原因是 touch 交互会触发后续的模拟 click。本文提供兼容 pointer 与 touch 的可靠解决方案。
在移动端，关闭覆盖式对话框后常意外触发底层元素的 click 事件（如对话框重新弹出），根本原因是 touch 交互会触发后续的模拟 click。本文提供兼容 pointer 与 touch 的可靠解决方案。
当使用 pointerdown 关闭模态对话框（如拖拽操作场景）时，桌面端行为正常，但移动端会出现“穿透点击”问题：用户轻触对话框区域关闭它后，浏览器仍会触发一次延迟的 click 事件（约 300ms 后），目标是对话框下方被遮挡的可点击元素（例如打开对话框的按钮），导致对话框意外重新显示。
该问题的本质在于：pointerdown 本身不阻止后续由触摸序列生成的合成 click 事件；而 e.preventDefault() 在 pointerdown 中对 click 无影响——它仅能阻止默认行为（如滚动、文本选中等），无法取消浏览器自动生成的 click。
✅ 正确解法是单独监听 touchstart 并调用 e.preventDefault()：
button.addEventListener("click", () => {
dialog.style.display = "";
});
dialog.addEventListener("pointerdown", e => {
// 专注处理拖拽逻辑（pointermove/pointerup），无需 preventDefault
dialog.style.display = "none";
});
// 关键修复：拦截 touchstart，彻底阻止后续 click 生成
dialog.addEventListener("touchstart", e => {
e.preventDefault(); // 阻止 touch 导致的 click 冒泡和触发
});
⚠️ 注意事项：
- touchstart 监听必须绑定在同一目标元素（即 dialog）上，且 preventDefault() 必须在该事件中调用；
- 不要依赖 pointerdown 中的 stopPropagation() 或 stopImmediatePropagation() 来解决此问题——它们对合成 click 无效；
- 若需支持旧版 iOS Safari（
- 此方案与 pointer 事件完全正交，可安全共存，不影响拖拽逻辑的跨端一致性。
总结：移动端点击穿透是 touch → click 事件链的固有行为，而非事件冒泡问题。唯一可靠拦截点是 touchstart，通过 preventDefault() 切断事件链源头，即可彻底避免背后元素被意外激活。
