加cursor:pointer能触发ios点击响应，是因为它向webkit发出可交互信号，绕过“非可点击元素触摸拦截”，确保touchstart/click事件正常分发。
加 cursor: pointer 能快速恢复点击响应，但只是表层修复；真正失效常源于 iOS WebKit 对「可交互区域」的判定失败，而非 CSS 本身阻断事件。
为什么加 cursor:pointer 后 click 才生效
iOS Safari 默认只对语义化可点击元素（如 <button></button>、<a></a>）或显式声明交互意图的元素分发 touchstart 和 click。普通 <div> 即使绑了监听器，也可能压根收不到触摸信号——后续所有 JS 逻辑都卡在第一步。
<ul>
<li>
<code>cursor: pointer 不是让光标变手型（移动端不显示），而是向 WebKit 发送“这个区域要响应触摸”的信号
width/height 为 0，或被 overflow: hidden 裁剪出视口，加了也无效伪元素（::before/::after）导致点击失效
常见于用 ::before 绘制汉堡图标、箭头等视觉元素，但未设置尺寸：
- 仅写
content: ""，无width/height/padding，WebKit 认为该伪元素「无渲染内容」，不参与 hit testing - 即使父元素有宽高，伪元素自身 layout box 面积为 0，触摸坐标落空
- 修复方式：给伪元素加上
display: block+ 明确width和height，或用padding撑开热区
浮动（float）或定位元素被视觉遮挡
你看到按钮在那儿，不代表它能点到——浮动元素极易被其他已创建层叠上下文的元素盖住：
- 检查
position: relative的父容器是否没设clear: both，导致它默认层叠层级高于浮动流 - 用 DevTools 选中目标元素，看
Computed面板中pointer-events是否为none（包括继承） - 临时加
outline: 2px solid red，确认高亮框是否和视觉位置一致；若偏移，说明有别的元素占位 - 运行
console.log($0.getBoundingClientRect())，对比返回坐标与实际点击点
动画过程中点击突然失灵
CSS 动画本身不锁交互，但浏览器事件坐标映射可能滞后：
- 用
left/top动画会触发布局，导致 hit area 更新延迟；优先改用transform - 动画期间需动态控制
pointer-events：监听animationstart设为none，animationend和animationcancel都要恢复为auto - 在
@keyframes的0%和100%关键帧里显式写pointer-events: auto，防 CSS 优先级覆盖 JS 设置 - 极端情况（如 SVG 动画路径），需用
getScreenCTM()+inverse()手动转换坐标
最易忽略的一点：所有这些修复都依赖「元素有真实的 layout box」。如果一个按钮靠空伪元素撑开、父容器塌陷、或被 transform: translateZ(0) 加速却没配 will-change: transform，iOS 可能直接跳过 hit testing——此时加再多 cursor: pointer 或监听 touchstart 都没用。
