Jquery 使用委托时如何停止事件传播?

Jquery 使用委托时如何停止事件传播?,jquery,Jquery,当我在子事件和父事件上使用.bind绑定事件时,子事件可以停止事件传播,返回false;但当我使用委托时,返回false;不停止事件传播 html: 您应该使用e.stopPropagation()来防止传播,而不是返回false 返回false从技术上讲是两件事;1) 阻止默认操作,2)停止传播。尝试切换到e上的方法调用,看看这是否解决了您的问题 为什么可以有两个单击处理程序: $( '.parent' ).click(function ( e ) { if ( $( e.targe

当我在子事件和父事件上使用.bind绑定事件时,子事件可以停止事件传播,返回false;但当我使用委托时,返回false;不停止事件传播

html:


您应该使用
e.stopPropagation()
来防止传播,而不是返回false


返回false
从技术上讲是两件事;1) 阻止默认操作,2)停止传播。尝试切换到
e
上的方法调用,看看这是否解决了您的问题

为什么可以有两个单击处理程序:

$( '.parent' ).click(function ( e ) {
    if ( $( e.target ).is( '.child' ) ) {
        alert( 'child click' );
    } else {
        alert( 'parent click' );
    }    
});
现场演示:


这一模式的概括:

$( 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
}

您可以始终使用
e.stopPropagation()
您的事件未被传播。您正在将单击处理程序绑定到.parent,并且正在单击.parent

e。在这种情况下,stopPropagation()
将不起作用。改用。这里有一个

对我有效的方法是在单击处理程序中检查不希望被其他单击事件触发的单击目标的类名。像这样的

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

从技术上讲,它解决了这个问题,但我喜欢分离不同元素的功能,所以我需要一个包含两个事件处理程序的解决方案。然后不要使用
.delegate
,只需使用
。在两个位置单击
。@mblase但这意味着您必须为每个子元素绑定一个单击处理程序-这不是最好的解决方案…@mblase75,我想使用委托,因为我动态添加子元素,我不想每次添加元素都绑定事件。@Šime Vidas,子元素及其管理器和父容器是不同的小部件,我想完全分离它们的功能,在上一个解决方案中,容器(父)元素功能仍然必须了解子元素。是否可能重复?是的,这就是我一直在寻找的解决方案。谢谢@星际编码器-正确,你的解决方案更好。从不知道
stopImmediatePropagation()
。谢谢
$( '.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
}
    if(e.target.className.toString().indexOf("product-row") > -1){ 
      // Only do stuff if the correct element was clicked 
    }