纯JavaScript事件监听PC端正常移动端不生效如何解决

• 移动端浏览器对click事件存在300ms延迟校验，用于区分双击缩放操作，对于range这类可拖动元素，触摸拖动操作不会被识别为标准click事件，导致监听不生效
• 部分移动端内核会优先响应触摸类事件，仅绑定click事件时，部分交互逻辑不会触发对应回调

根据你的实际使用场景二选一即可：

场景1：需要监听range滑块数值变化（最常用场景） #

直接替换click事件为input事件，该事件对PC、移动端的拖动、点击调整数值操作都能完美兼容，无需额外适配：

// 替换原有click事件绑定即可
document.getElementById("myText").addEventListener("input", myFunction)

如果仅需要在用户结束调整、数值确定后触发一次回调，可替换为change事件，不会在拖动过程中频繁触发。你也可以直接在标签上绑定事件：<input type="range" id="myText" value="1" min='1' max="4" oninput="myFunction()">

场景2：确实需要监听元素的点击动作 #

同时绑定click和touchend事件，覆盖PC和移动端的交互，同时做去重处理避免重复触发回调：

const myText = document.getElementById("myText")
let isTouched = false
// 移动端触摸事件
myText.addEventListener("touchend", function(e) {
  e.preventDefault() // 阻止触发后续click事件避免重复执行
  if (!isTouched) {
    isTouched = true
    myFunction()
    setTimeout(() => isTouched = false, 100)
  }
})
// PC端点击事件
myText.addEventListener("click", myFunction)

可选优化 #

你原有代码中的显示隐藏逻辑可以简化：

function ra() {
  const a = document.getElementById('ss');
  a.style.display = a.style.display === "none" ? "block" : "none"
}

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