如果第一個函數運行，請不要運行第二個函數

我有一個包含下拉，div，通知框（#container）的頁眉，可以切換幻燈片。的JavaScript的下拉框是：如果第一個函數運行，請不要運行第二個函數

$("a.trigger").click(function (event) { 
    $('#container').slideToggle(100) 
    event.preventDefault(); 
});

我也有關閉DIV盒的功能，如果我點擊任何地方#container之外：

$(document).mouseup(function (e) { 
    var container = $('#container'); 

    if (!container.is(e.target)) {  
     container.hide(); 
    } 
});

當我點擊它丟棄然後點擊#container，然後如果我點擊#container以外的任何地方，它會正確關閉它。但是當我點擊而#container已經被曝光時，它會從第二個javascript函數中關閉它，因爲不在#container之內，但之後第一個函數也會被觸發，並且#container在隱藏後再次滑動。

這裏是一個小提琴：http://jsfiddle.net/Hx65Q/1013/

我想使它所以如果第一個JavaScript函數被調用，然後它只是停止從開始第二個的。我會如何處理這個問題？還有更傳統的方法嗎？

來源

2014-07-11 user3767853

您可以設置一個簡單的標誌[小提琴]（http://jsfiddle.net/Hx65Q/1026/） – A1rPun

@ A1rPun當用戶在外面點擊時，您不考慮關閉菜單。 –

@SpencerWieczorek感謝您的高擡頭。 – A1rPun

只是檢查，如果目標是.trigger或父（以防萬一），像你在，如果這樣做：

$(document).mouseup(function (e) { 
    if($(e.target).closest('.trigger').length) return; 
    var container = $('#container'); 

    if (!container.is(e.target)) {  
     container.hide(); 
    } 
});

http://jsfiddle.net/Hx65Q/1034/

最好將返工事件處理程序並在兩個元素上使用click，而在另一個上使用mouseup，在另一個上使用click。然後你可以使用停止傳播：

$("a.trigger").click(function (event) { 
    $('#container').slideToggle(100) 
    event.preventDefault(); 
    event.stopPropagation(); //Stop the event from bubbling 
}); 

$(document).click(function (e) { 
    var container = $('#container'); 

    if (!container.is(e.target)) {  
     container.hide(); 
    } 
});

http://jsfiddle.net/Hx65Q/1036/

來源

2014-07-11 20:30:51

很好的答案。儘管使用全球旗幟並沒有錯，但沒有一個確實更好。 –

重做和讓他們都點擊肯定是更好的。隨着停止傳播。謝謝 – user3767853

這有助於一些嗎？

var opened= false; 

$("a.trigger").click(function (event) { 
     $('#container').slideToggle(100) 
     opened=!opened; 
     event.preventDefault(); 
    }); 

$(document).mouseup(function (e) { 
     var container = $('#container'); 

     if (!container.is(e.target) && !opened) {  
      container.hide(); 
     } 
    });

來源

2014-07-11 20:30:20 Matt

關於第二個函數使用第二布爾什麼。 http://jsfiddle.net/Hx65Q/1031/

希望這是你想要的東西：我

if (!container.is(e.target)&&!$('a.trigger').is(e.target)) {  
     container.hide(); 
    }

這裏小提琴試了一下。

乾杯

來源

2014-07-11 20:33:46

您已經回答了您的問題。你檢查的容器不是e.target。爲什麼不檢查a.trigger不是e.target？

$(document).mouseup(function (e) { 
     var container = $('#container'); 
     var trigger = $('a.trigger'); 

     if (!container.is(e.target) && !trigger.is(e.target)) {  
      container.hide(); 
     } 
    });

http://jsfiddle.net/LMZX2/

來源

2014-07-11 20:34:01 Edward

還可以檢查目標是否爲你觸發類

$(document).mouseup(function (e) { 
    var container = $('#container');  
    if (!container.is(e.target) && !$('.trigger').is(e.target)) {  
     container.hide(); 
    } 
});

DEMO

來源

2014-07-11 20:34:47 charlietfl

爲什麼在這個特定情況下將目標轉換爲jQuery對象？ –

@ Karl-AndréGagnon好點，我猜只是一種老習慣。我習慣使用'$ tgt.something' – charlietfl

您應該使用event.stopPropagation()並結合這兩個事件點擊。

$("a.trigger").click(function (event) { 
     $('#container').slideToggle(100) 
     event.stopPropagation(); 
    }); 

$(document).click(function (e) { 
     $('#container').hide(); 
    });

使幻燈片向上動畫：$（'＃container'）。slideUp（100）;

來源

2014-07-11 20:44:50 ebob

如果第一個函數運行，請不要運行第二個函數

回答

相關問題