3

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 – Pranay Jaiswal Nov 21 '18 at 21:14
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.