如何使onclick函数只执行一次？

Question

我在一个按钮上有这个谷歌分析代码。我只需要执行一次，这样用户就不能通过多次按下按钮来更改统计信息。我尝试过类似主题的解决方案，但它们不起作用。请帮帮忙。这是我的密码。

<script>
    function klikaj(i) {
        gtag('event', 'first-4', {
            'event_category' : 'cat-4',
            'event_label' : 'site'
        });
    }

    document.body.addEventListener("click", klikaj(i), {once:true})
</script>


<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">My button</div>

Answer 1

您可以像这样使用removeAttribute()：document.getElementById('thumb0').removeAttribute("onclick");

也可以让函数返回false，如下所示：document.getElementById('thumb0').onclick = ()=> false

Answer 2

删除按钮上的onclick属性，并通过JavaScript注册监听器，就像您试图做的那样：

<div id="thumb0" class="thumbs"
  style="border: 1px solid; cursor: pointer; float: left">
    My button
</div>
<script>
    function klikaj(i) {
        console.log(i);
    }
    document.getElementById('thumb0')
        .addEventListener("click", function(event) {
            klikaj('rad1');
        }, {once: true});
</script>

​

如果浏览器不支持{ once: true }选项，则可以手动删除事件侦听器：

​

<div id="thumb0" class="thumbs"
  style="border: 1px solid;cursor: pointer;float:left">
    My button
</div>

<script>
    function klikaj(i) {
        console.log(i);
    }
    function onClick(event) {
      klikaj('rad1');
      document
        .getElementById('thumb0')
        .removeEventListener("click", onClick);
    }
    
    document
      .getElementById('thumb0')
      .addEventListener("click", onClick);
</script>

​

Answer 3

我建议设置一个变量并检查它的值。

<script>
    var clicked = false;
    function klikaj(i) {
        if (clicked === false) {
            gtag('event', 'first-4', {
                'event_category' : 'cat-4',
                'event_label' : 'site'
            });
        }
        clicked = true;
    }
    ...
</script>

或删除其他人建议的onclick事件，

<script>
    function klikaj(i) {
        gtag('event', 'first-4', {
            'event_category' : 'cat-4',
            'event_label' : 'site'
        });
        document.getElementById('thumb0).onclick = undefined;
    }
    ...
</script>

请注意，在IE和边缘中不幸地不支持once: true。请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener