防止父事件触发子事件答案

【问题标题】：Prevent parent event from triggering child events防止父事件触发子事件
【发布时间】：2012-05-13 12:41:13
【问题描述】：

因此有很多问题询问如何防止子事件触发父事件，但我似乎找不到相反的问题。

我像这样打开和关闭父事件：

var body_event = function(e){
    console.log('test');
};

$('#btn').toggle(
    function(e){
        $('body').bind('click', body_event);
    }, 
    function(){
        $('body').unbind('click', body_event);
    }
);

目前，如果我在这样的页面上运行它：

<body>
    <div id="btn">click to activate</div>
    <div id="example" onclick="alert('do not show this when event is bound')">
        try the body event by clicking here
    </div>
</body>

切换功能正常，但是当我单击“单击此处尝试正文事件”时，警报仍会显示。我希望能够在绑定主体事件时忽略所有子事件，而无需单独引用子事件。

换句话说，我正在寻找比在切换时执行类似操作更好的解决方案：

$('#example").attr('onclick', '');

【问题讨论】：

标签： javascript events

【解决方案1】：

这很接近，但并不完全在那里。它不检查是否绑定了特定的函数，只检查jQuery对象是否绑定了任何事件。

必须有一种方法来查询事件以查找是否一定要单击，然后它也指向什么函数。希望这能让你开始。

http://jsfiddle.net/PhjB8/

var body_event = function(e) {
    alert('test');
};

$('#btn').toggle(

function(e) {
    $('body').addClass('active').bind('click', body_event);
}, function() {
    $('body').removeClass('active').unbind('click', body_event);
});

$('#example').click(function() {
    //debugger;
    if ($('body').data('events') == undefined) {
        alert('do not show this when event is bound');
    }
});

【讨论】：

【解决方案2】：

event.stopPropagation() 可以解决这个问题，在body_event里面？

【讨论】：

你必须扭转你的想法。如果父母有一个事件，那么不要为孩子开火。 StopPropagation 只对相反的场景有用。
是的，重要的是要记住，子事件在父事件之前触发。