我如何绑定一个JQuery事件，使它只触发一次

How can I bind a JQuery event to make it only fire once?

本文关键字：一次 一个 何绑定 绑定 JQuery 事件      更新时间：2023-09-26

我有一个帮助弹出窗口，我想关闭时，其他地方点击。我有:

$('.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()不是我想要的，在它为页面上的每个元素触发之前。我只想让它发射一次

它看起来像你是附加事件处理程序到每个元素在你的dom除了帮助弹出?嗯…

这个怎么样:

创建一个单独的"mask"div，覆盖整个屏幕，但是是透明的(不透明度:0.0)。附加点击事件处理程序仅到遮罩div。然后打开覆盖div顶部的信息div。单击页面上的任何地方，除了信息div，事件将被遮罩div捕获，然后再到达它下面的任何东西。在事件处理程序中，hide() infodiv，并删除maskdiv。在测试/试验这一点时，从部分不透明的蒙版开始，而不是完全透明的。

使用布尔变量并在第一次点击后将其设置为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上的点击事件可以处理隐藏。

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

$('.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);
})
相关文章：