如何在不立即运行的情况下更改元素 onclick 的 onclick？

乔希枕头

当我单击一个按钮时，我想更改 html 标签的 onclick。

这是我的代码：

JavaScript：

function reset() {
  //some code 1
}

function hit() {
  //some code 2
  document.getElementById("htmlId").onclick = reset;
}

HTML：

<!DOCTYPE html>
<html id = "htmlId">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width height=device-height">
  </head>  
  <body>
    <button id = "btn1" onclick = "hit();" class = "btn">Hit</button>
    <script src="script.js">
    </script>
  </body>
</html>

当我单击按钮时，我希望执行某些代码 2，并在我下次单击某些代码 1 时执行。但是当我同时点击一些代码 1 和一些代码 2 时会立即执行。

如果在它之前添加一个空的 onclick，reset(); 仍在运行。

JavaScript：

function empty() {
}

function hit() {
  //some code 2
  document.getElementById("htmlId").onclick = empty;
  document.getElementById("htmlId").onclick = reset;
}

我怎样才能解决这个问题？

雷托尔

这里发生了一些有趣的事情：

你在 HTML 属性中有 JavaScript，这不再被认为是好的做法。
处理整个 HTML 元素和该元素内要管理的按钮将导致气泡和捕获问题
您想更改元素上的侦听器，但您正在使用该onclick属性，而现代实践是使用addEventListenerand removeEventListener。

以下是我的建议：

将所有的 JavaScript 监听器放在 JS 文件中；你的 HTML 应该没有 JavaScript。
使用addEventListener而不是分配给onclick.
因为添加和删除事件侦听器可能很棘手，所以考虑使用一个变量来记录按钮是否被按下。然后您的 html 单击侦听器仅在处于该状态时才会重置。

所以像（代码未经测试，但应该让你开始）：

let shouldReset = false;

document.getElementById("btnId").addEventListener('click', (e) => {
  shouldReset = true;
  e.stopPropagation(); // so the big HTML element doesn't get it
}

document.getElementById("htmlId").addEventListener('click', () => {
  if (shouldReset) {
    reset();
  }
}

因此，除非首先单击按钮，否则单击 html 元素不会执行任何操作。希望有帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。