对不同元素上的不同事件使用相同函数的jQuery.one(）

jQuery .one() with same function for different events on different elements

本文关键字：jQuery 函数 one 元素 事件      更新时间：2023-09-26

我的页面上有一个介绍，当按下一个键或点击某个元素时，该介绍将消失。我将对这两个事件使用相同的功能，但由于页面经过了大量修改，无论以何种方式触发，该事件都将只触发一次。

我的功能：

function start() {
    $('.intro').remove();
    $('.something-else').show();
}

如何绑定事件：

$('body').keypress(start);
$('.intro').click(start);

如果事件是一样的，我可以说

$('body, .intro').one('click', start);

如果这两个事件都发生在同一个元素上，我可以说：

$('.intro').one('click keypress', start);

如何将两者结合起来：具有不同的元素和不同的事件，并且函数只能调用一次？

最简单的解决方案是存储函数是否被调用。

var started = false;
function start() {
    if(started) return;
    $('.intro').remove();
    $('.something-else').show();
    started = true;
}

然后，您的函数只能被调用一次，每隔一次调用都将被忽略。

我不认为这个解决方案是一个明确的方法，而是使用.one()和.trigger()的组合来完成的。因为您对其中一个绑定项调用了$(".intro").remove()，所以事件处理程序是隐式解除绑定的。样品Fiddle

除去fiddle中看到的html，这就是代码。

// Your event handler
function start() {
    $("#intro").remove();
    $("#main").show();
    console.log("start handler called");
}
// Handle the keypress event
$("body").one( "keypress", start );
// Allow user to click through the intro, but trigger the keypress handler on the body which is a one-time event handler)
$("#intro").one( "click", function () { $("body").trigger( "keypress" ); });

使用两行代码即可完成；）

$('body').one('keypress', start);
$('.intro').one('click', start);

编辑：您应该手动解除另一个回调的绑定，以免它稍后意外运行。

相关文章：