Question

我有一个帮助弹出窗口，我想在点击其他地方时关闭它。这就是我所拥有的：

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

但是，在为页面上的每个元素触发之前，一个（）不是我想要的。我只希望它开一次。

Answer 1

看起来你将事件处理程序附加到你的dom中的每个元素，除了帮助弹出窗口？嗯...

这个怎么样：

创建一个覆盖整个屏幕的单个“蒙版”div，但它是透明的（不透明度：0.0）。将点击事件处理程序仅附加到该掩码div。然后打开覆盖div顶部的info div。单击页面上的任何位置（除了info div）之前，掩码div将捕获该事件，然后才能获取其下的任何内容。在事件处理程序中，隐藏（）信息div，并完全删除掩码div。在测试/试验时，从部分不透明的蒙版开始，不完全透明。

Answer 2

如果您只想在所有元素中触发一次，那么当单击任何一个或使用标记时，您可能必须手动取消绑定所有事件处理程序：

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

Answer 3

使用布尔变量并在第一次单击后将其设置为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;
    }    
  });
})

Answer 4

有两种选择：

您可以使用blur事件，而不是将点击事件绑定到除弹出窗口之外的所有内容。
在弹出窗口和页面其余部分之间添加透明的整页div。透明div上的点击事件可以处理隐藏。

如何绑定JQuery事件以使其仅触发一次？

4 个答案: