In my component I have the following element:

<div class="slds-backdrop" aura:id="backdrop"></div>

In code I activate backdrop using:

$A.util.addClass(component.find("backdrop"), 'slds-fade-in-open');

Now I would like to register clicks on the backdrop. I can do the following using vanilla:

const backdropEl = component.find("backdrop").getElement();

const handleClick = function(e) {
    //does not matter what will happen

backdropEl.addEventListener("mousedown", function() {$A.getCallback(handleClick)();});

Are there any better ways to do this in lightning realms? I am feeling that I am doing it wrong. ( :

Thank you.

  • In the end its just HTML div so standard JS way seems fine to me... The only concern is if you try to add same to standard lightning components that do not support mousedown event then it might cause problem. On div looks fine to me Commented Nov 21, 2018 at 21:14

1 Answer 1


The "Lightning" way would typically be to use native handlers on the element, just like you would with any other component:

<div class="slds-backdrop" aura:id="backdrop" mousedown="{!c.handleBackdropClick}"></div>

There's nothing wrong with adding handlers later, though. It's just not the normal way you would do this in Lightning.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .