Question

当我使用.bind绑定子对象和父对象的事件时，子事件可以通过返回false来停止事件传播;但是当我使用委托时，返回false;不会阻止事件传播。

HTML：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

JS：

$('.parent').delegate('.child','click',function(e){
    alert('child click');
    return false;
});
$('.parent').bind('click',function(e){
    alert('parent click');
});

Answer 1

e.stopPropagation()在这种情况下不起作用。请改用e.stopImmediatePropagation()。这是一个fiddle

Answer 2

为什么有两个点击处理程序，如果你有一个：

$( '.parent' ).click(function ( e ) {
    if ( $( e.target ).is( '.child' ) ) {
        alert( 'child click' );
    } else {
        alert( 'parent click' );
    }    
});

现场演示： http://jsfiddle.net/J3EAQ/2/

这种模式的概括：

$( element ).click(function ( e ) {
    if ( e.target === this ) {
        // this element was clicked directly
    } else {
        // this element was NOT clicked directly
        // a descendant of this element was clicked
    }    
});

单独的处理程序？

$( '.parent' ).click(function ( e ) {
    if ( this ==== e.target ) {
        parentClicked.call( e.target, e );
    } else {
        childClicked.call( e.target, e );
    }    
});

function childClicked( e ) {
    // child click handler
}

function parentClicked( e ) {
    // parent click handler
}

Answer 3

您应该使用e.stopPropagation()来阻止传播，而不是通过返回false。

return false在技术上是两件事; 1）防止默认动作，2）停止传播。尝试切换到e上的方法调用，看看是否能解决您的问题。

Answer 4

您始终可以使用e.stopPropagation()

Answer 5

对我来说有用的是检查点击处理程序中您不希望被其他点击事件触发的点击目标的类名。像这样的东西。

    if(e.target.className.toString().indexOf("product-row") > -1){ 
      // Only do stuff if the correct element was clicked 
    }

Answer 6

您的活动未被宣传。您正在将单击处理程序绑定到.parent，并且您单击.parent

如何在使用委托时停止事件传播？

6 个答案: