我希望计时器在单击.exitA后启动

Question

单击.exitA，第一个按钮后，屏幕上会出现一个计时器。

我希望计时器在单击该按钮后启动。

https://jsfiddle.net/87jvr3uh/

现在，单击该按钮后它就会停止。

<div class="outer-containerA">

  <div class="video-containerA">
    <button class="exitA" type="button" title="Exit" aria-label="Exit"></button>
    <div class="ratio-keeper">
      <div class="video playA"></div>
      <div class="curtain"></div>
    </div>
    <div class="playA"></div>
  </div>
  <div class="video-containerB hide">
    <button class="exitB" type="button" title="Exit" aria-label="Exit"></button>
    <div class="ratio-keeper">
      <div class="video playB"></div>
      <div class="curtain"></div>
    </div>
    <div class="playB"></div>

    <h2>Click anywhere to stop the timer</h2>

    <p id="timer"></p>

    <script>
      let seconds = 0;
      let timerId = setInterval(updateTimer, 100);

      function updateTimer() {
        seconds += 0.1;
        document.getElementById("timer").innerHTML = seconds.toFixed(1) + " seconds";
      }

      document.body.addEventListener("click", function() {
        clearInterval(timerId);
        document.getElementById("timer").innerHTML += " (stopped)";
      });

    </script>
  </div>

这是独立计时器代码本身：

https://jsfiddle.net/o4qLxnr8/2/

Answer 1

向.exitA添加onclick事件

<button class="exitA" onclick=“startTimer()” type="button" title="Exit" aria-label="Exit"></button>

或者你也可以检查事件目标在类列表中是否有 exitA，然后启动计时器。