如何使 onclick 事件只工作一次答案

【问题标题】：How to make onclick event to work only once如何使 onclick 事件只工作一次
【发布时间】：2016-08-05 04:51:40
【问题描述】：

我想要做的是当有人点击页面中的任意位置时。将打开一个新窗口，但我希望这种情况只发生一次，因此当有人再次单击正文时，该功能不应运行。有什么建议吗？请不要使用 jquery。

<!DOCTYPE html>
<html>
<body onclick="myFunction()">
<script>
    function myFunction() {
        window.open("http://www.w3schools.com");
    }
</script>
</body>
</html>

【问题讨论】：

尝试使用全局 javascript 变量。让这个值最初为假。在打开窗口之前，检查这个变量的值。仅当此变量的值为 false 时才打开窗口。打开窗口后，将其设置为 true。
使用全局变量
1：全局布尔变量，2：运行myFunction时移除onclick事件，3：……想不出第三个选项
遗憾的是，如果阻止用户再次单击所需的时间比用户执行另一次单击所需的时间长，则此处的任何答案都不起作用。例如，如果用户在我们从元素中删除 onclick 或检查全局变量的值之前非常快速地（有意或无意地）多次单击，则将注册多次单击。还没找到解决办法。

标签： javascript popup

【解决方案1】：

一个简短的解决方案：

<body onclick="myFunction(); this.onclick=null;">

检查一下：

<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>

【讨论】：

简单高效。它甚至可以在 IE 等旧浏览器上运行吗？
谢谢你让我开心

【解决方案2】：

有几种方法可以做到这一点。

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.有一个标志来检查函数是否已经被调用。

<!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>

【讨论】：

测试了第二个，对我来说效果很好，谢谢！
从技术上讲，存在竞争条件，但希望它们不太可能发生。

【解决方案3】：

使用"once" in the "options" parameter for the addEventListener method 是使用一次函数的好方法。

function myFunction(){
    console.log("hey")
}

document.body.addEventListener("click", myFunction,{once:true})

【讨论】：

【解决方案4】：

下面使用IIFE 创建一个包含布尔变量的闭包并避免填充全局名称空间，显式地将一个函数附加到全局对象window 并检查它是否是第一次触发该函数

function(){
    var firstTime = true;
    window.myFunction = function() {
        if (firstTime){
            firstTime = false;
            window.open("http://www.w3schools.com");
        }
    }
}()

【讨论】：

【解决方案5】：

<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>

【讨论】：

【解决方案6】：

这是 JQuery 代码。

我们可以如下使用bind() unbind() / on() off()来避免多次点击。

或

我们可以使用 one() 函数只发生一次点击。

$(document).ready(function () {
    $('body').bind('click', function () {
        alert('button clicked');
        $(this).unbind('click');
    });
});

或

$(document).ready(function () {
    $('body').one('click', function () {
        alert('button clicked');
    });
});

【讨论】：