发布于 5年前

JavaScript 点击事件只执行一次的方法

JavaScript要实现只允许Button被点击执行一次的办法有几种:

方法一、在添加事件监听器时,设置选项once为true

示例:

<div id="btn0">
    My button
</div>
<script>
    function doSomething(v) {
        console.log(v);
    }
    document.getElementById('btn0')
        .addEventListener("click", function(event) {
            doSomething('hello world');
        }, {once: true});
</script>

方法二、如果浏览器不支持once,有一种比较简单的做法是在元素被点击后,移除元素的onclick事件。

示例:

<div id="btn0">
    My button
</div>
<script>
    function doSomething(v) {
        console.log(v);
    }
    function onClick(event) {
      doSomething('hello world');
      document
        .getElementById('btn0')
        .removeEventListener("click", onClick);
    }
    document
      .getElementById('btn0')
      .addEventListener("click", onClick);
</script>
©2020 edoou.com   京ICP备16001874号-3