2011-12-11 83 views
1

我有一個幫助彈出窗口,我想關閉其他地方點擊。這裏是我有什麼:如何綁定一個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); 
    }); 
}) 

但是一()不是我想在它爲頁面上的每個元素觸發之前。我只想讓它射擊一次。

+0

您在第3個選擇器中缺少'''。也是''''one()'的第二個參數? – kubetz

回答

1

它看起來像你將事件處理程序附加到你的dom中除了幫助彈出窗口中的每個元素?嗯......

如何:

創建一個單一的「面具」的div覆蓋整個屏幕,但是是透明的(不透明度:0.0)。將單擊事件處理程序只有附加到該掩碼div。然後打開覆蓋div頂部的info div。點擊頁面上的任何地方,除了info div之外,事件將被mask div捕獲,然後到達其下的任何東西。在你的事件處理程序中,隱藏()info div,並完全刪除mask div。在對此進行測試/實驗時,請先從部分不透明蒙版開始,而不是完全透明)。

+0

+1。比他原來的方法更優雅的解決方案。 – shesek

0

如果你只是想在您所有的元素火一次,那麼你可能需要手動解除綁定所有的事件處理程序被點擊任何一個時,或使用一個標誌:

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

。利用一個布爾變量它設置爲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; 
    }  
    }); 
}) 
0

幾個選項:

  • 您可以使用blur事件,而不是將點擊事件綁定到除彈出窗口以外的任何事件。
  • 在彈出窗口和頁面的其餘部分之間添加一個透明的完整頁面div。透明div上的點擊事件可以處理隱藏。