如果第一个函数运行，请不要运行第二个函数

我有一个包含下拉，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

如果第一个函数运行，请不要运行第二个函数

回答

相关问题