移动端点击失效根源是CSS触摸目标尺寸不达标，需确保可触控区域≥44×44px；iOS click有300ms延迟且易被系统手势拦截，应改用pointerdown；fixed定位在iOS底部消失因body高度不足，须设min-height:100vh；z-index失效多因层叠上下文被意外创建。
移动端点击失效或点不准的根源不是 JS
根本原因是 CSS 触摸目标尺寸不达标。iOS 和 Android 都遵循 WCAG 标准，要求最小可触控区域 ≥ 44×44px；但很多开发者只设了 24px 图标或用 font-size 控制按钮大小，导致实际热区远小于此——不同字体、系统缩放、DPR 渲染都会让真实点击面积浮动甚至塌缩。
这不是“加个 touch-action: manipulation 就能解决”的问题，而是必须从尺寸定义层就锁定物理像素级热区。
- 按钮容器显式设
width: 56px、height: 56px（留出 6px 边距缓冲） - 内部图标用
flex居中，禁用vertical-align或line-height控制垂直对齐 - 若用 SVG，必须声明
width和height属性，避免靠viewBox拉伸 - 避免在按钮上套
transform: scale(0.8)类操作——它会缩小渲染坐标，但不缩小时序响应区域，造成点中却无反馈
为什么 click 在 iOS Safari 上延迟又不可靠
原生 click 在 iOS 上有约 300ms 延迟，且依赖双击缩放判断逻辑；当底部悬浮条紧贴屏幕边缘时，手指按压区域易触发系统手势（如滑回上一页），导致事件被截断或吞掉。
更隐蔽的问题是：如果页面 <meta name="viewport"> 缺失 user-scalable=no 或 maximum-scale=1，Safari 会保留双击检测，click 就永远慢半拍。
立即学习“前端免费学习笔记（深入）”；
- 改用
pointerdown事件监听，它无延迟、兼容触控/鼠标/笔，且不破坏键盘可访问性（Enter/Space仍有效） - 若必须用
touchstart，务必传{ passive: false }，否则preventDefault()无效，滚动和点击会冲突 - 给按钮加
role="button"和tabindex="0"，确保屏幕阅读器识别并支持键盘聚焦
position: fixed 在 iOS 底部的“粘滞消失”怎么破
iOS Safari 对 position: fixed 有特殊优化策略：当页面内容高度不足一屏（document.body.scrollHeight < window.innerHeight），滚动时按钮可能短暂卡在半空或直接消失——这不是 bug，是浏览器为省电做的合成层裁剪。
常见错误是加 transform: translateZ(0) 强制硬件加速，但这反而会引发输入框失焦、滚动卡顿，甚至让软键盘弹出后页面错位。
- 给
<body>加min-height: 100vh，强制至少撑满一屏，提供稳定锚点 - 避免在悬浮条祖先链上使用
transform、filter或will-change，它们会创建新的 containing block，使fixed锚定到父级而非视口 - 底部固定条不要嵌套在
transform: translateY(0)的 wrapper 里——哪怕只是“为了居中”加的，也会触发 iOS 的异常行为
z-index 明明写了 9999 还是被遮住？
数值堆高没用。真正导致遮挡的是层叠上下文（stacking context）被意外创建：只要悬浮条的某个父容器设置了 position: relative + z-index: 1，整个子树就被“封进”局部层叠环境，外部模态框再高也盖不住它。
另一个高频坑是：悬浮条本身用了 transform（比如 scale(1.05) 或 translateY(-2px)），现代浏览器会自动为其新建层叠上下文，此时若没配 z-index，它的层级就只跟同级兄弟比，而不是全局比。
- 确保悬浮条直系父容器设
position: relative且z-index: 1000（仅作占位，不参与视觉定位） - 悬浮条自身必须带
z-index: 1000，且不能依赖 transform 创建新上下文 - 检查是否有第三方 SDK（如客服插件、埋点脚本）动态插入了高
z-index的遮罩层，它们常设成z-index: 2147483647，直接碾压你的样式
mousemove 监听器；关闭时用 display: none 而非 remove()，下次 show 又得重新绑定事件——这些细节不处理，上线后就是偶发点击失效的源头。 
