JavaScript检测触摸设备手指抬起事件解决按钮高亮失效问题

• 你所使用的(any-pointer: none)媒体查询适配性不足，多数纯触摸设备的浏览器无法准确匹配该规则，导致touchend事件未完成绑定，手指抬起时没有触发恢复样式的逻辑
• 未监听touchcancel事件：触摸过程中如果出现系统中断、手指滑出按钮区域等情况，浏览器会触发touchcancel事件而非touchend，缺少该监听会导致按钮一直保持高亮状态
• 部分触摸浏览器会在触摸事件结束后模拟鼠标hover行为，和现有逻辑冲突导致样式残留

JS代码修复 #

优化事件绑定逻辑，去掉冗余的媒体查询判断，新增touchcancel事件监听，同时阻止触摸事件的默认行为避免模拟鼠标事件冲突，修改后代码如下：

const searchBtn = document.getElementById("search_button");

if (!this.isTouch) {
  // 桌面端鼠标事件绑定
  searchBtn.addEventListener("mouseover", highlightButton);
  searchBtn.addEventListener("mouseout", restoreButton);
} else {
  // 触摸端事件绑定
  searchBtn.addEventListener("touchstart", (e) => {
    e.preventDefault();
    highlightButton();
  });
  // 同时监听两种触摸结束场景
  searchBtn.addEventListener("touchend", restoreButton);
  searchBtn.addEventListener("touchcancel", restoreButton);
}

更简单的CSS替代方案 #

该高亮效果可以完全通过CSS实现，不需要JS逻辑，稳定性更高：

/* 适配桌面端悬停场景 */
@media (hover: hover) {
  #search_button:hover {
    /* 替换为你的高亮样式规则 */
    background-color: #eee;
    border-color: #ccc;
  }
}
/* 适配触摸端点击场景 */
@media (hover: none) {
  #search_button:active {
    /* 替换为你的高亮样式规则 */
    background-color: #eee;
    border-color: #ccc;
  }
}

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