移动端浮层点击穿透本质是事件未被真正拦截，因默认pointer-events: auto导致事件捕获冒泡，尤其ios safari中即使touchstart.preventdefault()仍可能在300ms内触发底层按钮。

移动端浮层点击穿透的本质是事件没被真正拦截

不是遮罩没盖住，而是它默认 pointer-events: auto，事件照常捕获并向下冒泡——尤其在 iOS Safari 中，哪怕加了 touchstart.preventDefault()，底层按钮仍可能在 300ms 延迟窗口内被触发。真正“透”的是那个视觉存在、DOM 存在、但没关掉事件响应的元素，比如用 opacity: 0 或 visibility: hidden 隐藏的浮层。

给浮层设 pointer-events: none 后关闭按钮点不了？这是继承陷阱

父元素设了 pointer-events: none，整棵子树都会被跳过命中测试，子元素写 pointer-events: auto 也无效。这不是 bug，是所有现代浏览器统一行为。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 错误做法：.float-overlay { pointer-events: none; } + .close-btn { pointer-events: auto; }
• 正确解法一：把 .close-btn 移出浮层 DOM 树（例如用 Portal 渲染到 下），再靠 z-index 控制层级
• 正确解法二：只对浮层的「非按钮区域」设 pointer-events: none，按钮所在区域保持 auto（需用伪元素或额外容器隔离）
• 别用 position: absolute 把按钮“视觉上”浮出来——DOM 结构里它还是被父级 none 拦截

安卓 WebView 和 iOS Safari 的实际兼容差异

两者都支持 pointer-events: none，但行为边界不同：

• iOS Safari：对 touchstart/touchend 生效，但 Safari 15.4 之前不支持与 touch-action 协同；若 none 层下面压着 <input>，旧版可能连软键盘都不弹
• 安卓 WebView：偶有不稳定，尤其对 position: sticky 或 iframe 内元素；部分厂商浏览器（如华为、小米）会忽略 none 对 input[type="file"] 的穿透
• 通用建议：搭配 touch-action: none 防止滚动干扰；真机必测，微信内置浏览器建议加空 <div> 做透传代理 <h3>动画过渡中 <code>pointer-events 的时机必须精准

  用 opacity 做淡入淡出时，不能只写 opacity: 0; pointer-events: none 就完事——过渡期（比如 opacity 从 1→0 的中间帧）若仍残留 pointer-events: auto，用户就可能点中半透明状态下的元素。

  • 必须配合 CSS 动画或 JS 过渡回调：动画开始前设 pointer-events: none，结束后再移除（或切回 auto）
  • 避免和 visibility: hidden 混用：它不影响事件流，visibility: hidden + pointer-events: none 多此一举
  • 别依赖 z-index 解决问题：它只控制绘制顺序，不改变事件捕获路径
  真实场景里最容易被忽略的，是浮层 DOM 结构和祖先节点的状态——你以为只改了一个 class，其实整个子树已被浏览器跳过命中测试，连 event.target 都捕获不到。