触屏及Chrome设备模拟器触摸模式下onclick事件不触发问题

AI 小北

2026-10-3

触屏设备的click事件存在300ms的双击判定延迟，且部分场景下触摸事件的默认行为会阻断click监听器触发，Chrome模拟器的触摸模式会优先触发触摸相关事件，也容易出现这个问题，可按以下步骤排查解决：

1. 排查函数作用域问题

内联onclick属性绑定的函数必须挂载在window全局作用域下才可以调用。如果你的image1函数是写在DOM加载完成回调、闭包或者ES6模块中，全局作用域访问不到，就会触发失败。建议把事件绑定从HTML内联迁移到JS代码中，写法更可控：

// 确保DOM加载完成后绑定
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.image-box').addEventListener('click', image1)
})

对应的HTML可以去掉onclick属性：

<div class="image-box"><img src="example.png"></div>

2. 兼容触摸设备的事件绑定

不要只依赖click事件，同时绑定touchend事件做兼容，同时加标识避免触摸和click事件重复触发：

document.addEventListener('DOMContentLoaded', () => {
  const imageBox = document.querySelector('.image-box')
  let touchFired = false
  // 绑定触摸结束事件
  imageBox.addEventListener('touchend', (e) => {
    touchFired = true
    // 阻止默认行为避免后续触发click
    e.preventDefault()
    image1()
  }, { passive: false })
  // 绑定click事件兼容非触摸场景
  imageBox.addEventListener('click', () => {
    if (!touchFired) {
      image1()
    }
    touchFired = false
  })
})

同时给元素加CSS属性消除触摸默认行为干扰：

.image-box {
  /* 告诉浏览器不需要对该元素做触摸缩放、双击放大等默认处理，消除300ms延迟 */
  touch-action: manipulation;
  /* 触屏设备会识别带pointer光标样式的元素为可点击元素，提升触发优先级 */
  cursor: pointer;
}