Question

嗨，我是javascript的新手。这是我的代码。我想要做的是当有人点击页面中的任何地方。将打开一个新窗口，但我希望这只发生一次，所以当有人再次点击正文时，该功能不应该运行。有什么建议？请不要jquery

<!DOCTYPE html>
<html>

<body onclick="myFunction()>

<script>

    function myFunction() {

        window.open("http://www.w3schools.com");

    }

    </script>

</body>

</html>

Answer 1

一个简短的解决方案：

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

检查：

＆＃13;

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

＆＃13;

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

Answer 3

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

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

Answer 4

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

Answer 5

具有讽刺意味的是，使用"once" in the "options" parameter for the addEventListener method是一次使用函数的好方法。

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

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

Answer 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');
    });
});

如何让onclick事件只工作一次

6 个答案: