Javascript 如何绑定JQuery事件使其只触发一次?
我有一个帮助弹出窗口,我想关闭时,其他地方被点击。以下是我所拥有的:Javascript 如何绑定JQuery事件使其只触发一次?,javascript,jquery,Javascript,Jquery,我有一个帮助弹出窗口,我想关闭时,其他地方被点击。以下是我所拥有的: $('.help[data-info]').click(function(){ $('.info[a complicated selector]').toggle(400); $('*:not(.info[the complicated selector]).one('click','',function(){ .info[the complicated selector].hide(400); }); }
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]).one('click','',function(){
.info[the complicated selector].hide(400);
});
})
但是在为页面上的每个元素激发前,one()不是我想要的。我只希望它触发一次。如果您只希望在所有元素中触发一次,则可能需要在单击任何一个事件处理程序时手动解除所有事件处理程序的绑定,或者使用标志:
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
var sel = $('*:not(.info[the complicated selector]);
function hideInfo() {
.info[the complicated selector].hide(400);
sel.unbind('click', hideInfo);
}
sel.bind('click', hideInfo);
})
如果您只想在所有元素上触发一次,则可能需要在单击任何一个事件处理程序时手动解除所有事件处理程序的绑定,或使用标志:
$('.help[data-info]').click(function(){
$('.info[a complicated selector]').toggle(400);
var sel = $('*:not(.info[the complicated selector]);
function hideInfo() {
.info[the complicated selector].hide(400);
sel.unbind('click', hideInfo);
}
sel.bind('click', hideInfo);
})
使用布尔变量,并在第一次单击后将其设置为true,这样它就不会再次触发操作:
$('.help[data-info]').click(function() {
var clicked = false;
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]').one('click','',function() {
if (!clicked) {
.info[the complicated selector].hide(400);
clicked = true;
}
});
})
使用布尔变量,并在第一次单击后将其设置为true,这样它就不会再次触发操作:
$('.help[data-info]').click(function() {
var clicked = false;
$('.info[a complicated selector]').toggle(400);
$('*:not(.info[the complicated selector]').one('click','',function() {
if (!clicked) {
.info[the complicated selector].hide(400);
clicked = true;
}
});
})
有两种选择:
- 您可以使用该事件,而不是将单击事件绑定到除弹出窗口之外的所有内容
- 在弹出窗口和页面其余部分之间添加一个透明的完整页面
。透明div
上的单击事件可以处理隐藏div
- 您可以使用该事件,而不是将单击事件绑定到除弹出窗口之外的所有内容
- 在弹出窗口和页面其余部分之间添加一个透明的完整页面
。透明div
上的单击事件可以处理隐藏div
- 有几个选项:
创建一个覆盖整个屏幕但透明的“遮罩”div(不透明度:0.0)。仅将单击事件处理程序附加到该掩码div。然后打开覆盖div顶部的info div。单击页面上除info div以外的任何位置,掩码div将捕获该事件,然后再获取其下的任何内容。在事件处理程序中,隐藏()info div,并删除掩码div。测试/试验时,请从部分不透明的掩码开始,而不是完全透明)。看起来您正在将事件处理程序附加到dom中的每个元素,除了帮助弹出窗口?嗯 这个怎么样:
创建一个覆盖整个屏幕但透明的“遮罩”div(不透明度:0.0)。仅将单击事件处理程序附加到该掩码div。然后打开覆盖div顶部的info div。单击页面上除info div以外的任何位置,掩码div将捕获该事件,然后再获取其下的任何内容。在事件处理程序中,隐藏()info div,并删除掩码div。测试/试验时,从部分不透明的遮罩开始,而不是完全透明的遮罩。第三个选择器中缺少
“
。也是one()
的'
第二个参数?您在第三个选择器中缺少'
。也是'
one()的第二个参数?