我的页面上有一个介绍,当按下某个键或单击某个元素时,该介绍将消失。我将对这两个事件使用相同的函数,但是由于页面被大量修改,事件只会触发一次而不管它被触发的方式。
我的功能:
function start() {
$('.intro').remove();
$('.something-else').show();
}
我如何绑定事件:
$('body').keypress(start);
$('.intro').click(start);
如果事件是相同的,我可以说
$('body, .intro').one('click', start);
如果两个事件都发生在同一个元素上我可以说:
$('.intro').one('click keypress', start);
如何将两者结合起来:拥有不同的元素和不同的事件,并且只能调用一次函数?
答案 0 :(得分:1)
最简单的解决方案是存储您的函数是否已被调用。
var started = false;
function start() {
if(started) return;
$('.intro').remove();
$('.something-else').show();
started = true;
}
然后你的函数只能调用一次,每次调用都会被忽略。
答案 1 :(得分:0)
使用两行代码并完成;)
$('body').one('keypress', start);
$('.intro').one('click', start);
修改强> 你应该手动取消绑定另一个回调,以免它在以后意外运行。
答案 2 :(得分:0)
我不认为此解决方案是一种干净的显式方法,而是使用.one()
和.trigger()
的组合完成的。因为您在其中一个绑定项上调用$(".intro").remove()
,所以事件处理程序是隐式未绑定的。 Sample 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" ); });