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

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

$('[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()将正常工作。

如果这不是您想要的，请澄清您的问题，这并不容易理解。

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

1 个答案: