Question

第一个按钮onclick有效，但当onclick设置为stopChrono()而不是chrono()时，stopChrono()无法正常工作。这只发生在Chrome中，因为在Mozilla和Edge中，效果非常好。

这是网络代码： https://jsbin.com/mononohute/edit?html,js,output

P.S：这篇文章与其他帖子不一样＆＃34; Onclick在Chrome＆＃34;因为环境完全不同。

Answer 1

jQuery方便地存储事件侦听器，因此如果您在单独的函数中定义它们，则可以轻松删除它们：

function stopChrono() {
    clearInterval(chronometer);
    $(this).attr('class', 'w3-btn w3-green')
    $('#start').off('click', stopChrono)
    $('#start').on('click', startChrono)
}

function startChrono(e) {
    $(this).attr('value', function (_, text) {
        $(this).attr("class", "w3-btn w3-red")
        return text === 'Stop!' ? 'Start!' : 'Stop!';
    })
    $('#start').off('click', startChrono)
    $('#start').on('click', stopChrono)
}

$('#start').on('click', startCrono);

一旦计时器启动，我删除了'click'事件监听器，因为下一次单击不应该启动计时器。我还添加了stopChrono'click'事件监听器，因为它应该停止计时。

stopChrono()反之亦然：'click'监听器与stopChrono断开连接，并重新连接到startChrono。

现在你应该可以来回走了。

Answer 2

我重新构建了click事件处理程序。

$('#start').on('click', function(e) {
  $(this).attr('value', function(_, text) {
    if (text === 'Stop!') {
      $(this).attr('class', 'w3-btn w3-green');
      stopChrono();
      return 'Start!';
    } else {
      $(this).attr('class', 'w3-btn w3-red');
      chrono();
      return 'Stop!';
    }
  });
});

虽然原件是这样的：

$('#start').on('click', function(e) {
  $(this).attr('value', function(_, text) {
    $(this).attr("class", "w3-btn w3-red")
    return text === 'Stop!' ? 'Start!' : 'Stop!';
  })
  if ($(this).attr('onclick') == 'chrono()') {
    $(this).attr('onclick', 'stopChrono()')
  } else {
    $(this).attr('onclick', 'chrono()')
    $(this).attr('class', 'w3-btn w3-green')
  }
});

现在有效。我删除了html onclick处理程序，因为其他chrono()被解雇了两次。

var start = document.getElementById('start'),
  reset = document.getElementById('reset'),
  counter = document.getElementById('counter'),
  sCounter = 0,
  mCounter = 0,
  hCounter = 0,
  displayChrono = function() {
    if (sCounter < 10) {
      sCounter = "0" + sCounter;
    }

    if (mCounter < 10) {
      mCounter = "0" + mCounter;
    }

    if (hCounter < 10) {
      hCounter = "0" + hCounter;
    }
    counter.value = hCounter + ":" + mCounter + ":" + sCounter;
  },
  chronometer,
  openchrono = document.getElementById('openchrono'),
  chronowinin = document.getElementById('chronowinin');


function chrono() {
  chronometer = setInterval(function() {
    mCounter = +mCounter;
    hCounter = +hCounter;
    sCounter = +sCounter;
    sCounter++;
    if (sCounter == 60) {
      mCounter++;
      sCounter = 0;
    }

    displayChrono();
  }, 1000);
}

function resetChrono() {
  sCounter = 0;
  mCounter = 0;
  hCounter = 0;
  displayChrono();
}

function stopChrono() {
  clearInterval(chronometer);
}



$('#openchrono').click(function() {
  if ($(this).attr('value') == '+') {
    $(this).attr('value', '-');
    $('#chronowinin').slideDown();
  } else {
    $(this).attr('value', '+');
    $('#chronowinin').slideUp();
  }
});

$('#start').on('click', function(e) {
  $(this).attr('value', function(_, text) {
    if (text === 'Stop!') {
      $(this).attr('class', 'w3-btn w3-green');
      stopChrono();
      return 'Start!';
    } else {
      $(this).attr("class", "w3-btn w3-red");
      chrono();
      return 'Stop!';
    }

  });
});

//
// $('#start').click(function() {
//     if ($(this).attr('value') == 'Start!') {
//         $(this).attr('value', 'Stop!');
//         $(this).attr('class', 'w3-btn w3-red')
//         $('#start').click(stopChrono());
//     }});

//else {
//         $(this).attr('value', 'Start!');
//         $(this).attr('class', 'w3-btn w3-green');
//         $('#start').click(stopChrono()
//           // function() {
//           // function stopChrono() {
//           //   clearInterval(chronometer);
//           // }
//     //}
//   );
// }});
//
//


// openchrono.addEventListener("click", function() {
//   chronowinin.className = "w3-container w3-row";
//   openchrono.innerHTML = "-";
//   openchrono.id = "closechrono"
//
// closechrono.addEventListener("click", function() {
//   var closechrono   =     document.getElementById('closechrono');
//   chronowinin.className = "w3-container w3-row hidden";
//   openchrono.innerHTML = "+";
//   closechrono.id = "openchrono"
//   });
// });
// )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Everything - everything you'll want is here.</title>

</head>

<body>
  <div class="w3-row w3-container">
    <div class="w3-col m3 w3-text-red">
      <p></p>
    </div>
    <div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
      <p>
        <i>Everything you want is here.</i>
      </p>
    </div>
    <div class="w3-col m3 w3-text-red">
      <p></p>
    </div>
  </div>
  <div id="chronowin" class="w3-container w3-row">
    <div class="w3-col m3 w3-text-red">
      <p></p>
    </div>
    <div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-red showhover">
      <p>
        Chronometer
        <input type="button" value="+" id="openchrono" class="w3-btn-floating w3-red" style="right:5%; float:right; border:none"></input>
      </p>
    </div>
    <div class="w3-col m3 w3-text-red">
      <p></p>
    </div>
  </div>
  <div id="chronowinin" class="w3-container w3-row" style="display: none">
    <div class="w3-col m3 w3-text-red">
      <p></p>
    </div>
    <div class="w3-col s 12 m6 w3-center w3-white w3-text-grey">
      <p></p>
      <input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
      <br>
      <p></p>
      <input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green">
      <!-- <input type="button" name="name" value="Stop!" class="w3-btn w3-red" onclick="stopChrono()"> -->
      <input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="resetChrono()">
      <p></p>
    </div>
    <div class="w3-col m3 w3-text-red">
      <p></p>
    </div>
  </div>
  <script src="js/jquery.js" charset="utf-8"></script>
  <script src="js/chronometer.js" charset="utf-8"></script>
</body>

</html>

在chrome中无法正常工作

2 个答案: