javascript - 同一元素上的多个事件，停止立即传播

Question

我在同一个元素上有两个点击事件。其中一个是委托(delegate)事件，另一个不是。

$( document ).on( 'click.bar', 'p', function( e ) {

    console.log( 'click.bar', e );

    e.stopImmediatePropagation();

});

$( 'p' ).on( 'click.foo', function( e ) {

    console.log( 'click.foo' );

});

我想在执行“click.bar”时在特定情况下禁用“click.foo”。问题是，“click.foo”总是在调用“click.bar”之前调用。有什么想法吗？

Answer 1

如果您处理来自 $(document) 的两个事件，event.stopImediatePropagation工作正常。

您必须首先在脚本中注册第一个事件(带有 event.stopImediatePropagation 的事件)，因此当 document 时首先调用它被点击。

$( document ).on( 'click.bar', 'p', function( e ) {

    console.log( 'click.bar', e );

    e.stopImmediatePropagation();

});

$( document ).on( 'click.foo', 'p', function( e ) {

    console.log( 'click.foo' );

});

否则它不会工作，因为 jQuery 使事件向上冒泡(从内到外)，因此该事件在 p 中注册在到达 document 之前首先被触发.