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

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

$( 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.bar之前调用click.foo。有什么想法吗？

如果从$document处理这两个事件，event.stopmediatepropagation可以正常工作

您必须首先在脚本中注册第一个事件，即使用event.stopImediatePropagation注册的事件，因此在单击文档时会首先调用它

$( 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中注册的事件在到达文档之前首先被触发。

这可能有助于它停止在DOM树中的传播。不幸的是，StopperPropagation函数对委托事件没有影响。您需要使用事件捕获而不是事件冒泡–jQuery只支持冒泡事件模型。