如何綁定JQuery事件以使其僅觸發一次？

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);
  });
})

但是在為頁面上的每個元素觸發之前，one（）不是我想要的。 我只希望它開火一次。

Answer 1

看起來您正在將事件處理程序附加到dom中的每個元素（除了幫助彈出窗口之外）？ 嗯...

這個怎么樣：

創建一個覆蓋整個屏幕但透明的“蒙版” div（不透明度：0.0）。 將click事件處理程序僅附加到該蒙版div。 然后在疊加層div的頂部打開信息div。 單擊頁面上除info div以外的任何位置，該事件將在其到達其下的任何內容之前由mask div捕獲。 在您的事件處理程序中，將info div的hide（）刪除，然后完全刪除mask 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事件，而不是將click事件綁定到除彈出窗口之外的所有事件。
• 在彈出窗口和頁面的其余部分之間添加一個透明的整頁div 。 透明div上的click事件可以處理隱藏。