Lightning Aura Components Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Event Handler Behavior for Active Components
To prevent active event handlers on cached pages from causing problems, add a
workaround to your code to check if the component is still visible. To avoid this scenario and
the workaround, use Lightning message service instead to communicate across the DOM within a
Lightning page. The default scope used by Lightning message service channels publishes only to
active components.
When navigating away from a page in Lightning Experience, the framework caches the
components in the page so that they remain active, along with their event handlers. This
caching speeds up navigation, but it can cause the cached component to respond to events that
are not intended for it, such as force:refreshView or
force:recordSaveSuccess.
This workaround uses the offsetParent property for the component to get its handlers while they’re visible. The workaround is good only if the component definition has an HTML element in it.
This component includes an event handler and some HTML.
<!--myComponent.cmp-->
<aura:component>
<aura:handler event="c:appEvent" action="{!c.onEvent}>
<h1>This component has a handler</h1>
</aura:component>Here’s the client-side controller that uses the offsetParent property to get the component’s handlers while they’re still visible.
/* myComponentController.js */
({
onEvent: function(component, event, helper) {
var elem = component.getElement();
if (elem && elem.offsetParent !== null) {
// event handling logic here
}
}
})