在 JavaScript 中的单个按钮上两次使用 addEventListener 和 removeEventListener

Question

我正在尝试在浏览器中创建一个秒表，其中时间是在 'capture'（允许计时器继续）或 'stop'（这也会停止计时器）时捕获的。为此，我想要一个 html 按钮在两个标签和相应的功能（'start' 和 'stop and capture'）之间交替。我尝试使用两个 addEventListener 实例，每个实例都有一个关联的 removeEventListener。看完this useful article，我写了下面的代码：

var button = document.getElementById("start");

function onStart() {  
  start();
  document.getElementById("capture").style.visibility = 'visible'; // show capture button
  document.getElementById("start").innerHTML = "Stop & Capture";

  button.addEventListener("click", function() {
    onCapture(); // assigns value to a new variable
    onStop();
    button.removeEventListener("click", arguments.callee, false); // remove this EventListener
    }, false);
}

function onStop() {  
  stop();
  document.getElementById("capture").style.visibility = 'hidden'; // hide capture button 
  document.getElementById("start").innerHTML = "Start";

  button.addEventListener("click", function() {
    onStart();
    button.removeEventListener("click", arguments.callee, false); // remove this EventListener
  }, false);
}

然而，'start' / 'stop and capture' 按钮的行为是出乎意料的，每次按下它都会保存越来越多的时间实例。我的猜测是 removeEventListener 不工作，但我可能错了。关联的 html 是：

<div>Time: <span id="time"></span></div>
    <button onclick="onStart()" id="start" class="start" style="width:150px">Start</button>
    <button onclick="onCapture()" id="capture" style="visibility:hidden">Capture</button>
    <button onclick="reset()" id="reset">Reset</button>

Answer 1

因此，在尝试了很长时间的各种解决方案之后，发现问题出在将 removeEventListener 与匿名函数一起使用。这是正常工作的代码：

function onStart() {
    document.getElementById("start").removeEventListener("click", onStart, false); // remove listener
    start();
    document.getElementById("capture").style.visibility = 'visible'; // show capture button
    document.getElementById("start").innerHTML = "Stop & Capture";
    document.getElementById("start").addEventListener("click", onStop, false); // add listener
}

function onStop() {
    document.getElementById("start").removeEventListener("click", onStop, false); // remove listener
    onCapture();
    stop();
    document.getElementById("capture").style.visibility = 'hidden'; // hide capture button 
    document.getElementById("start").innerHTML = "Start";
    document.getElementById("start").addEventListener("click", onStart, false);  // add listener
}

在 JavaScript 中的单个按钮上两次使用 addEventListener 和 removeEventListener

Using addEventListener and removeEventListener twice on a single button in JavaScript

javascript

html

addeventlistener

removeeventlistener