javascript - 仅处理一次事件

Question

目前我有这段代码:

var tracked = false;
$('.button').on('click', function(e){
    e.preventDefault();
    // do stuff on each click
    if(!tracked) {
        // track interaction just once
        tracked = true;
    }
});

..但我想让它更优雅，因为我不能在每个交互的任何地方都有 tracked var。所以我在想这个:

$('.button').on('click', function(e){
    e.preventDefault();
    // do stuff on each click
    $('.button').one('click', function(e){
        // track interaction just once
    });
});

...但是看起来不太好。可以更好吗？

编辑添加:该按钮会切换一个元素，我需要它在每次点击时执行此操作，但仅跟踪交互一次，而不是每次点击时。

Answer 1

.one()是你所需要的全部。您可以将其与 .on() 结合使用，将多个事件监听器添加到同一按钮，以便您可以触发不同的事件并禁用某些事件，但不能禁用其他事件。

.one() 事件将触发一次，然后自行删除，附加的 .on() 点击事件将保留并继续触发。

// add a listener that will only fire once
$('.button').one('click', function(e){
    console.log('one click event');
});

// add another listener that will continue to fire
$('.button').on('click', function(e){
    console.log('regular click event');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>

如果你希望它尽可能紧凑，你可以使用一些 jquery 链接。

$('.button').one('click', function(e){
    // tracking code
}).on('click', function(e){
    // toggling code
});