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

Question

I am trying to create a stopwatch in a browser where the time is either captured upon 'capture' (allowing the timer to continue) or 'stop' (which will also stop the timer). To do so, I want a single html button to alternate between two labels and corresponding functions ('start' and 'stop and capture'). I have tried to use two instances of addEventListener, each with an associated removeEventListener. After reading this useful article , I wrote the following code:

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);
}

However, the behaviour of the 'start' / 'stop and capture' button is unexpected and saves more and more time instances every time it is pressed. My guess was that the removeEventListener isn't working, but I might be wrong. The associsated html is:

<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

So, after spending far too long trying various solutions, it turned out that the problem was using removeEventListener with anonymous functions. Here is the code that worked properly:

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
}