[SalesForce] How to stop an application event from propagating to another instance of the same component

I'm currently building a native dynamic data table in lightning (not using any 3rd party libraries). For some features of the table to work, I had to use application events because component events won't work since the components firing the events are in different branches than the components handling the events.

While the application events work, if I put another data table component onto the same lightning page, doing any action that relies on application events will also trigger the same action on the other instances of the data table component.

Anyone have any ideas on how to contain the application events?

Best Answer

During the event bubble phase, use event.stopPropagation() to cause the component's root to be become the root node for the default phase. This means you'll need a handler at the top-level component to halt propagation beyond that component. See Application Event Propagation. It'll stop processing with the component that fired the event.

<aura:component ...>
<!-- root component -->
<aura:handler includeFacets="true" phase="bubble" name="c:appEvent" handler="{!c.containEvent}" />


// In controller
containEvent: function(component, event, helper) {
    event.stopPropagation();
}
Related Topic