如何使用ontouchstart代替onclick

Question

我正在使用下面的代码，它可以在桌面上运行，但点击功能在移动设备上不起作用，所以我尝试使用 ontouchstart 但这也不起作用。 我做错了什么？

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

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

<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="myBtn" class="" onclick="myFunction()">Mute</button>
   <button id="myBtn" class="mobile" ontouchstart="myFunction()">Mute</button>
  </div>

Answer 1

试试这个。它可以在桌面和移动设备上运行。

var btn = document.getElementById("myBtn");
btn.addEventListener('click', myFunction, false);