stopPropagation()防止孩子的onClick函数 [英] stopPropagation() preventing childs onClick functions
问题描述
我到处搜索,找不到该问题的答案.
I've searched everywhere and I couldn't find an answer to this question.
我在div内建立了一个带有几个div的菜单:
I've built a menu with couple of divs inside divs:
<nav id="menu">
<span>Open Menu</span>
<div class="dropdownContain">
<div class="dropOut">
...
...
<div id="logout_wrap">
<a id="logout">
还有一个使用JQuery的脚本,以便在单击"#menu"时显示(切换)菜单,而在单击body时消失.为此功能,我必须使用stopPropagation()方法来阻止#dropDownContain运行"body"的hide()函数
And a script using JQuery so that menu appears (toggle) when "#menu" is clicked and disappear when body is clicked. for this functionality I had to use stopPropagation() method to stop #dropDownContain from running "body" 's hide() function
$(document).ready(function () {
$('#menu').click(function (e) {
e.stopPropagation();
$('.dropdownContain').toggle();
});
$(document).click(function (e) {
$('.dropdownContain').hide();
});
$('.dropdownContain').click(function (e) {
e.stopPropagation();
});
我还为"#logout"(位于菜单的主体)内部的"#logout"创建了一个单击事件,以运行someThing()函数.
also I have made a click event for "#logout" which is inside "#dropdownContain" (which is the main body of menu) to run someThing() function.
jQuery('body').on('click', '#logout', function () {
alert("THIS DOES NOT WORK");
});
问题在于"#logout"的分配函数由于在其父级(或我认为)中调用的stopPropagation()方法而不会触发.
The problem is that "#logout" 's assigned function will not fire because of the stopPropagation() method that is called in it's parent (or so I think).
这是此代码的html + js链接,以便您可以看到它的使用情况: JSFiddle
here's the link to html + js for this code, just so you could see it in use: JSFiddle
那么有一种解决方案可以解决此问题,同时保持菜单弹出窗口如所解释的那样正常工作?
so is there a solution to fix this while keeping the menu popup working as explained?
推荐答案
使用stopPropagation停止,并手动检查单击是否在#menu
内部:
Stop using stopPropagation and manually check if the click was inside #menu
or not :
$('#menu').on('click', function() {
$('.dropdownContain').toggle();
});
$(document).on('click', function(e) {
if (! $(e.target).is('#menu') || $(e.target).closest('#menu').length )
$('.dropdownContain').hide();
});
这篇关于stopPropagation()防止孩子的onClick函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!