Javascript 如何使 onclick 事件只工作一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38781349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make onclick event to work only once
提问by Alex
Hi I'm new to javascript. here is my code. what I want to do is when someone click anywhere in the page. A new window will open, but I want this to happen only once, so when someone click again on body, the function should not run. Any advice? No jquery please
嗨，我是 javascript 新手。这是我的代码。我想要做的是当有人点击页面中的任何地方时。将打开一个新窗口，但我希望这仅发生一次，因此当有人再次单击 body 时，该函数不应运行。有什么建议吗？请不要jquery
<!DOCTYPE html>
<html>
<body onclick="myFunction()>
<script>
function myFunction() {
window.open("http://www.w3schools.com");
}
</script>
</body>
</html>
回答by Gerardo Furtado
A short solution:
一个简短的解决方案：
<body onclick="myFunction(); this.onclick=null;">
Check it:
核实：
<button onclick="myFunction(); this.onclick=null;">This button works only once</button>
<button onclick="myFunction()">This button works always</button>
<script>
function myFunction() {
console.log("hello");
}
</script>
</body>回答by z0mBi3
There are couple of ways to do it.
有几种方法可以做到这一点。
1.Add event listener to body in the script and then remove once clicked.
1.在脚本中为body添加事件监听器，点击后删除。
<!DOCTYPE html>
<html>
<body>
<script>
document.body.addEventListener('click', myFunction);
function myFunction() {
window.open("http://www.w3schools.com");
document.body.removeEventListener('click', myFunction);
}
</script>
</body>
</html>
2.Have a flag to check if the function was already called.
2.有一个标志来检查函数是否已经被调用。
<!DOCTYPE html>
<html>
<body onclick="myFunction()">
<script>
var isBodyClicked = false;
function myFunction() {
if(isBodyClicked === false){
window.open("http://www.w3schools.com");
document.body.removeEventListener('click', myFunction);
}
isBodyClicked = true;
}
</script>
</body>
</html>
回答by Stefan Miranda
Using "once" in the "options" parameter for the addEventListenermethodis unironically enough a great way of using a function once.
使用“曾经”中的“选项”参数addEventListener的方法是unironically足够使用一次函数的一个好方法。
function myFunction(){
console.log("hey")
}
document.body.addEventListener("click", myFunction,{once:true})
回答by Tawfik Khalifeh
The below uses an IIFEto create a closure holding the boolean variable and avoid populating global name space, explicitly attach a function to global object windowand check if it's the first time the function is fired
下面使用IIFE创建一个包含布尔变量的闭包并避免填充全局名称空间，将函数显式附加到全局对象window并检查是否是第一次触发该函数
function(){
var firstTime = true;
window.myFunction = function() {
if (firstTime){
firstTime = false;
window.open("http://www.w3schools.com");
}
}
}()
回答by harishk
<script type="text/javascript">
function load() {
document.body.removeEventListener('click', load)
window.open('https://google.com/', '_blank')
}
window.onload = function() {
document.body.addEventListener('click', load)
}
</script>
