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.

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.

1<!--myComponent.cmp-->
2<aura:component>
3  <aura:handler event="c:appEvent" action="{!c.onEvent}>
4  <h1>This component has a handler</h1>
5</aura:component>

Here’s the client-side controller that uses the offsetParent property to get the component’s handlers while they’re still visible.

1/* myComponentController.js */
2({
3  onEvent: function(component, event, helper) {
4    var elem = component.getElement();
5    if (elem && elem.offsetParent !== null) {
6      // event handling logic here
7    }
8  }
9})

Lightning Aura Components Developer Guide

Event Handler Behavior for Active Components