stopPropagation（）阻止子进程onClick函数

我到处搜索，我找不到这个问题的答案。

我在div中构建了一个带有几个div的菜单：

 Open Menu 
 
 ... ... 
  

还有一个使用JQuery的脚本，以便在单击“#menu”时显示（切换）菜单，并在单击主体时消失。 对于这个function，我不得不使用stopPropagation（）方法来阻止#dropDownContain运行“body”的hide（）函数

 $(document).ready(function () { $('#menu').click(function (e) { e.stopPropagation(); $('.dropdownContain').toggle(); }); $(document).click(function (e) { $('.dropdownContain').hide(); }); $('.dropdownContain').click(function (e) { e.stopPropagation(); }); 

我也为“#logout”做了一个点击事件，它在“#dropdownContain”（这是菜单的主体）里面运行someThing（）函数。

 jQuery('body').on('click', '#logout', function () { alert("THIS DOES NOT WORK"); }); 

问题是“#logout”的指定函数不会触发，因为在它的父节点中调用了stopPropagation（）方法（或者我认为）。

这里是这段代码的html + js链接，只是为了让你看到它在使用中： JSFiddle

那么是否有一个解决方案来解决这个问题，同时保持菜单弹出按照说明工作？

Answer 1

停止使用stopPropagation并手动检查点击是否在#menu内：

 $('#menu').on('click', function() { $('.dropdownContain').toggle(); }); $(document).on('click', function(e) { if (! $(e.target).is('#menu') || $(e.target).closest('#menu').length ) $('.dropdownContain').hide(); }); 

Answer 2

除非您有使用事件委派的原因，否则您可以直接将点击绑定到注销链接。

 jQuery('#logout').on('click', function () { alert("this works"); }); 

您使用的委托版本仅在事件一直回到body元素时才触发（由于您正在停止传播，因此它不会触发）。