如何在不立即运行的情况下更改元素onclick的onclick？
[英]How to change onclick of element onclick without immediately running?
问题描述
When I click a button I want to change the onclick of the html tag. 
当我单击一个按钮时，我想更改html标签的onclick。
Here's my code: 这是我的代码：
JavaScript: JavaScript的：
function reset() {
//some code 1
}
function hit() {
//some code 2
document.getElementById("htmlId").onclick = reset;
}
HTML: 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>
When I click the button I expect for some code 2 to execute and on my next click for some code 1 to execute. 当我单击按钮时，我希望执行一些代码2，并在下次单击时执行一些代码1。 But when I click both some code 1 and some code 2 execute immediately. 但是，当我同时单击某些代码1和某些代码2时，将立即执行。
If you add an empty onclick before it, reset(); 如果在其之前添加一个空的onclick，请重设（）; still runs. 仍然运行。
JavaScript: JavaScript的：
function empty() {
}
function hit() {
//some code 2
document.getElementById("htmlId").onclick = empty;
document.getElementById("htmlId").onclick = reset;
}
How can I fix this? 我怎样才能解决这个问题？
2 个解决方案
解决方案1
1 已采纳 2019-04-20 02:36:40
There are a few things going on here that are interesting to address: 这里发生了一些有趣的事情：
- You have JavaScript in HTML attributes which is no longer considered good practice. HTML属性中包含JavaScript，这已不再是一种好习惯。
- Dealing with the whole HTML element and a button inside of that element that you want to manage will lead to bubble and capture issues 处理整个HTML元素以及您要管理的该元素内部的按钮将导致冒泡并捕获问题
- You want to change the listeners on elements but you are using the
onclickproperty while modern practice is to useaddEventListenerandremoveEventListener.您想更改元素上的侦听器，但是您正在使用onclick属性，而现代实践中是使用addEventListener和removeEventListener。
Here are my suggestions: 这是我的建议：
- Put all of the JavaScript listeners in the JS file; 将所有JavaScript侦听器放入JS文件； your HTML should be free of JavaScript. 您的HTML应该没有JavaScript。
- Use
addEventListenerinstead of assigning toonclick.使用addEventListener而不是分配给onclick。 - Because event listener adding and removing can be tricky, consider using a variable that records whether the button has been pressed. 由于添加和删除事件侦听器可能很棘手，因此请考虑使用一个变量来记录按钮是否被按下。 Then your html click listener does a reset only if in that state. 然后，只有在该状态下，您的HTML Click侦听器才会进行重置。
So something like (code is not tested, but should get you started): 所以类似（代码未经测试，但应该可以让您入门）：
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();
}
}
So clicks on the html element do nothing unless the button has been first clicked. 因此，除非首先单击该按钮，否则单击html元素不会执行任何操作。 Hope that helps. 希望能有所帮助。
解决方案2
0 2019-04-20 02:32:35
Simply create another function, and attach that once the first function has executed: 只需创建另一个函数，并在第一个函数执行后附加它：
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);
};
or to better apply to your case : 或者更好地适用于您的情况：
function reset() { ... }
function hit() {
// you initial hit() function's code here
document.getElementById("btn1").onclick = '';
setTimeout(function(){
document.getElementById("btn1").addEventListener('click', reset)
}, 1);
};
This can be improved in many ways, but for the scope of your question it should do just fine. 这可以通过许多方式加以改进，但是对于您所考虑的问题，它应该可以正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.