按钮点击无反馈主因是:active未生效或被覆盖，需确保其在:hover后声明、配合明显样式变化，并为移动端添加touch-action: manipulation；必要时用JS添加临时class实现可靠反馈。

按钮点击没反馈，大概率是 :active 样式没生效或被覆盖

浏览器默认只在鼠标按下（非触屏）或键盘空格/回车触发时短暂应用 :active，如果没写这个伪类，或者写了但颜色、背景、边框变化太小，用户根本察觉不到。更常见的是：你写了 :active，但被后面定义的 :hover 或其他规则覆盖了——CSS 优先级里，声明顺序靠后的会覆盖靠前的，除非用 !important（不推荐）。

• 检查开发者工具里元素的 :active 状态是否被“划掉”（即被覆盖）
• :active 必须写在 :hover 之后，否则 hover 会盖住 active 效果
• 避免只改文字颜色，建议配合 transform: scale(0.98) 或 background-color 明显变化

移动端 :active 失效？得加 touch-action: manipulation

iOS Safari 和部分安卓浏览器默认禁用 :active 的瞬时样式，防止误触，导致按钮按下去毫无反应。这不是 bug，是浏览器策略。

• 给按钮或其父容器加 style="touch-action: manipulation;"
• 或者在 CSS 中统一设置：

  button, [role="button"] { touch-action: manipulation; }

• 注意：不要对整个 body 加，可能影响滚动或手势行为

用 :hover 做视觉预判，但别依赖它做核心反馈

:hover 在触屏设备上基本无效（iOS 会延迟触发甚至不触发），所以它只能作为“鼠标悬停时的友好提示”，不能替代点击反馈。很多初级项目把 :hover 当成唯一交互提示，结果一上手机就“失联”。

• 把 :hover 设计成“准备态”：比如轻微抬升 box-shadow、背景变浅，暗示“可点”
• 把 :active 设计成“响应态”：背景变深、缩小 2%、加内阴影，强调“已按下”
• 永远确保 :active 效果比 :hover 更强、更明确

真正可靠的点击反馈：加 JS 监听 + 临时 class

当 :active 不够稳（比如快速连点、动画卡顿、需要兼容老 Android），最直接的办法是用 JS 主动控制状态。这不是过度设计，而是补足 CSS 的边界情况。

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

立即学习“前端免费学习笔记（深入）”；

• 监听 click 事件，给按钮加一个临时 class，比如 is-pressed
• 用 CSS 定义该 class 的样式，并配合 transition 实现平滑进出
• 用 setTimeout 在 150ms 后移除 class，避免残留

button {
  transition: background-color 0.15s, transform 0.1s;
}
button.is-pressed {
  background-color: #4a5568;
  transform: scale(0.97);
}

这种方案绕开了所有伪类兼容性问题，也便于后续扩展（比如加 loading 状态）。

最常被忽略的其实是「反馈持续时间」：太短（300ms）像卡顿。100–150ms 是人眼能识别又不拖沓的区间。