FloatButton悬浮按钮在移动端点击无效是怎么回事？

你这问题我见过好几次了，根本不是 click 事件不触发，而是移动端的点击事件被拦截了，尤其是用了 fixed 定位+高 z-index 的悬浮按钮，很容易被浏览器的“防误触”机制给吃掉。

先确认一个常见坑：你是不是在按钮区域下面（或者附近）有个 overflow: auto 的容器？或者页面里有 touch-action: manipulation 的全局样式？这些都会让浏览器把“快速点击”识别成滚动或缩放意图，从而取消 click 事件。

最稳妥的解决方案是直接加 touch-action: manipulation 到按钮本身，或者用 pointer-events 精准控制。但如果你已经用了 fixed 和高 z-index，大概率是被某个祖先元素的 touch-action: none 或 touch-action: pan-y 拦了。

我建议你先在按钮样式里加：

.float-btn {

  position: fixed;

  z-index: 9999;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

}

如果还不行，大概率是下面有元素挡着——不是你看到的 DOM 层级，而是浏览器渲染层。可以用 Chrome 远程调试（chrome://inspect）看看元素是否真的在最上层，或者临时给按钮加个背景色看是否被覆盖。

实在不行，手动绑定 touch 事件兜底：

const btn = document.querySelector('.float-btn')

btn.addEventListener('touchstart', (e) => {

  e.preventDefault()

  btn.click()

}, { passive: false })

不过别太依赖这个，优先还是查样式层叠问题，我之前就遇到过一个项目里 body 上有个全屏的 touchmove 监听器，没加 passive: false，结果所有 fixed 按钮点不动……那种情况连 click 都不报错，调试起来贼头疼。