如何用ontouchstart替代onclick？移动端点击失效问题排查

你的代码核心问题是HTML中存在重复的ID，这导致移动端按钮的点击逻辑异常，具体原因和修复方案如下：

错误根源 #

HTML规范要求页面中每个元素的ID必须唯一，document.getElementById("myBtn")只会获取页面中第一个匹配该ID的元素（也就是桌面端的按钮）。当你点击移动端按钮时：

1. 函数确实会切换视频的静音状态，但更新的是桌面按钮的文本，移动端按钮的文本没有变化，让你误以为功能失效；
2. 重复ID还可能导致浏览器事件绑定混乱，进一步加剧问题。

另外，移动端无需单独使用ontouchstart，现代移动端浏览器已经良好支持onclick，额外绑定ontouchstart反而可能引发事件重复触发的问题。

修复代码 #

修正后的HTML #

将两个按钮的ID改为唯一值，并统一使用onclick传递当前按钮元素：

<section class="video-container">
  <div class="video-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

  <div class="content">
    <button id="desktopBtn" onclick="myFunction(this)">Mute</button>
    <button id="mobileBtn" class="mobile" onclick="myFunction(this)">Mute</button>
  </div>
</section>

修正后的JavaScript #

移除对按钮元素的全局获取，改为通过函数参数接收当前点击的按钮，确保文本更新对应正确的按钮：

var video = document.getElementById("myVideo");

function myFunction(btn) {
    video.muted = !video.muted;
    btn.innerHTML = video.muted ? "Unmute" : "Mute";
}

额外优化（可选） #

如果担心移动端onclick的300ms延迟，可以给按钮添加CSS消除延迟：

button {
    touch-action: manipulation;
}

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