touchstart.preventdefault()必须绑定在遮罩层自身上，因touch到click存在300ms链式行为，仅在touchstart中调用才有效；绑定目标须为遮罩层dom元素本身，且确保其存在于dom中、未被pointer-events:none禁用。
touchstart.preventDefault() 必须绑定在遮罩层自身上
点透不是事件冒泡问题，而是 touch → 300ms 后合成 click 的链式行为。关键拦截点只有 touchstart，且 e.preventDefault() 必须在该事件中调用，否则无效。
常见错误是把 preventDefault() 放在 touchend 或 click 里——这时 click 已经被浏览器排队，拦截晚了。
-
touchstart监听目标必须是弹窗/遮罩层 DOM 元素本身（比如#modal），不能只绑在关闭按钮上 - 如果遮罩层是
display: none切换的，确保它在 touch 触发时仍存在于 DOM 中、且未被pointer-events: none禁用 - 旧版 iOS Safari（user-select: none 和
cursor: none样式，减少误触概率
避免混用 touch 和 click 是布局前提
只要页面里同时存在 touchend 和 click 绑定，点透风险就无法根除。布局阶段就得统一事件策略，不能“按钮用 touch，链接用 click”。
典型翻车场景：遮罩层关闭用 touchend，但底下轮播图的 next 按钮用 onclick ——手指一抬，300ms 后 click 正好落到刚暴露出来的轮播按钮上。
- 全局约定：所有可点击交互元素统一用
touchend（或封装好的tap），禁用click - 原生
a标签跳转必须改写：event.preventDefault(); location.href = 'xxx'; - 表单提交、checkbox/radio 等原生控件，需用
change替代click监听
viewport 和 touch-action 要同步配置
布局中漏掉这两项，touchstart.preventDefault() 效果会打折。它们不直接解决点透，但能切断触发点透的底层条件。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
没有 touch-action: manipulation，某些 Android 浏览器仍会保留双击缩放逻辑，导致 touch 事件后仍生成 click；没有 viewport 限制，iOS 可能强制启用 300ms 判断窗口。
- 必须在
中声明：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - CSS 中全局设置：
html { touch-action: manipulation; -ms-touch-action: manipulation; } - 不要只给按钮加
touch-action，要覆盖整个交互区域（如整个.modal容器）
pointer-events: none 是临时补丁，不是布局方案
靠给底层元素动态切 pointer-events: none 来挡 click，等于承认点透已发生，再打补丁。实际布局中极易失控。
比如列表页滚动后新渲染的项、懒加载的图片按钮、Vue 动态 key 生成的组件——你根本没法精准预判哪些元素在哪个时间点该加这个样式。
- 若真要用，必须配合
setTimeout延迟 350ms 移除，且期间用户点击完全无反馈 - 绝对不要在 CSS 中全局写
* { pointer-events: none }，这会让整个页面失焦 - 更稳妥的做法是：遮罩层显示时，给
body加pointer-events: none，隐藏后再恢复
点透问题本质是布局与事件策略耦合的结果。最易被忽略的是：touchstart 的绑定位置和 preventDefault() 的调用时机，比任何 CSS 或库都关键。一旦布局中遮罩层 DOM 被过早移除，或事件监听挂错节点，后面所有补救都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
