在jquery中防止事件从父元素到子元素

Question

我绑定了如下事件：

    $(document).delegate('.budget', 'click', function(e){
        if ($(this).hasClass('collapsed')) {
           $(this).removeClass('collapsed');
           $(this).addClass('expanded');
        }
        else if ($(this).hasClass('expanded')) {
           $(this).removeClass('expanded');
           $(this).addClass('collapsed');
        }
    });  

基本上，这会在展开和折叠之间切换。

我有另一个事件绑定如下：

    $('[id^="tree"]').delegate('.collapsed', 'click', function(e){
        var elementId = $(this).attr('id');
        hideChildElement(elementId);
    });

被第二事件绑定绑定的元素是被第一事件绑定绑定的元素的父元素。 发生的是，单击第一个绑定事件方法中的元素也会触发第二个事件绑定所绑定的事件。 我想防止任何事件从第二事件绑定到第一事件绑定方法绑定。

如果元素A绑定到第一个事件绑定中的click事件，而元素B绑定到第二个事件绑定中（A在B内，或者A是B的子级），则我不希望B的任何事件传播到A。注意，我尝试了e.stopImmediatePropagation(); 但是没有用

Answer 1

我认为您想防止如果单击.budged元素而触发绑定到[id^="tree"]的事件处理程序。 在这种情况下，您可以测试点击事件的来源：

$('[id^="tree"]').delegate('.collapsed', 'click', function(e){
    if($(e.target).closest('.budget').length === 0) {
        // not from inside budget element
        var elementId = $(this).attr('id');
        hideChildElement(elementId);
    }
});

另外，如果将两个事件处理程序都绑定到同一元素，即都绑定到document或[id^="tree"]或两者之间的任何元素，则event.stopImmediatePropagation()可以正常工作。

如果这不是您想要的，请说明您的问题，这不容易理解。