如何让锚点元素不可高亮？解决移动端按钮重复点击失效问题

CSS 方案（推荐） #

直接通过CSS禁用移动端浏览器的点击高亮效果，这是最简洁高效的方式：

.font-adjust-btn {
  /* 移除点击高亮背景色，彻底消除高亮状态 */
  -webkit-tap-highlight-color: transparent;
  /* 优化触摸交互，禁用双击缩放等干扰连续点击的行为 */
  touch-action: manipulation;
  /* 可选：防止按钮文本被选中，避免额外交互干扰 */
  user-select: none;
}

• -webkit-tap-highlight-color: transparent：直接消除WebKit内核移动端浏览器（如Chrome、Safari）的点击高亮层，点击后不会残留高亮状态，让连续点击不受阻碍。
• touch-action: manipulation：告诉浏览器该元素仅处理点击、滑动操作，禁用双击缩放等可能打断连续点击的默认行为，进一步优化触摸响应速度。

JavaScript 方案（备选） #

如果需要更精细的交互控制，可通过触摸事件阻止默认高亮行为：

const adjustBtns = document.querySelectorAll('.font-adjust-btn');
adjustBtns.forEach(btn => {
  btn.addEventListener('touchstart', (e) => {
    // 阻止浏览器默认的触摸高亮逻辑
    e.preventDefault();
    // 手动触发按钮原有点击逻辑（若逻辑绑定在click事件上）
    btn.click();
  });
});

注意：使用preventDefault()时要确保不影响按钮核心功能——如果你的字号调整逻辑绑定在click事件上，需要手动调用click()触发；若逻辑本身绑定在touchstart/touchend事件上，直接阻止默认行为即可。

内容的提问来源于stack exchange，提问作者futureseeking