处理事件只是一次

目前我有这段代码：处理事件只是一次

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

..但我想让它更优雅，因为我不能有tracked无功处处为每个互动。所以我想到这个：

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

...但它看起来不太好。它会更好吗？

编辑添加：按钮切换每次单击时需要它执行的元素，但仅跟踪一次交互，而不是每次单击。

来源

2017-05-30 3zzy

说实话，现在还不清楚，你需要的东西 - 你能解释一下使用情况 - 你的代码的第二位不会表现得一样的第一 –

@JaromandaX的按钮切换一个div我需要做的每次点击时，只跟踪一次交互，而不是每次点击。 – 3zzy

在这种情况下，你的第二个代码块肯定是不正确的，因为'.one'只适用于第二次点击，不是吗？ –

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

来源

2017-05-31 00:02:27 Soviut

该按钮切换每次点击所需的div，但只跟踪一次交互，而不是每次点击。 – 3zzy

@ 3zzy我更新了我的答案，以解决这个问题与多个事件监听器。你应该在你的问题中澄清这一点。 – Soviut

@ 3zzy我也更新了包含更紧凑版本的代码。 – Soviut

这和.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>

来源

2017-05-31 00:02:31

另一个选项会是这样的

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

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

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

来源

2017-05-31 00:03:28

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

来源

2017-05-31 00:04:19

处理事件只是一次

回答

相关问题