gpt4 book ai didi

javascript - 如何更改元素onclick的onclick而不立即运行?

转载 作者:行者123 更新时间:2023-12-02 23:47:59 25 4
gpt4 key购买 nike

当我单击按钮时,我想更改 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;
}

我该如何解决这个问题?

最佳答案

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

  1. HTML 属性中包含 JavaScript,这不再被认为是良好做法。
  2. 处理整个 HTML 元素您想要管理的该元素内的按钮将导致冒泡捕获问题
  3. 您想要更改元素上的监听器,但您正在使用 onclick属性(property),而现代实践是使用 addEventListenerremoveEventListener .

以下是我的建议:

  • 将所有 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 元素不会执行任何操作。希望有帮助。

关于javascript - 如何更改元素onclick的onclick而不立即运行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55769705/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com