Question

单击按钮时，我想更改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，请重设（）;仍在运行。

JavaScript：

function empty() {
}

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

我该如何解决？

Answer 1

这里有一些有趣的事情要解决：

您已经在HTML属性中使用了JavaScript，这已不再是一种好习惯。
处理整个HTML元素和要管理的元素内的按钮将导致气泡和捕获问题< / li>
您想更改元素上的侦听器，但是您正在使用onclick属性，而现代实践中则是使用addEventListener和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元素不会执行任何操作。希望有帮助。

Answer 2

只需创建另一个函数，并在第一个函数执行后将其附加：

function hit() {

    // you initial hit() function's code here

    document.getElementById("btn1").onclick = '';

    setTimeout(function(){
        document.getElementById("btn1").addEventListener('click', function() { 
            /* define the next function */ 
        })
    }), 1);
};

或者更好地适用于您的情况：

function reset() { ... }

function hit() {

    // you initial hit() function's code here

    document.getElementById("btn1").onclick = '';

    setTimeout(function(){
        document.getElementById("btn1").addEventListener('click', reset)
    }, 1);
};

这可以通过许多方式加以改进，但是对于您所考虑的问题，它应该可以解决。

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

2 个答案: