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

Answer 2

另一个选项类似于

function oneTime(el) {
  console.log("ok");
  el.onclick = null;
}

<button onclick="oneTime(this);">test</button>

但我相信.one()是最佳选择。

Answer 3

这与使用.one()函数的代码基本相同，但少了一个回调。我觉得它更优雅。

$('#selector').bind('click', function() {
       $(this).unbind('click');
       console.log('Clicked!');
});

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

Answer 4

$('.button').data( "tracked", false ).on('click', function(e){
    e.preventDefault();
    if($(this).data( "tracked" ) !== true ) {
        $(this).data( "tracked", true );
        // do stuff on each click
    }
});

仅处理一次事件

4 个答案: