1

In my lightning components, I am trying to create a system that keeps track of every button that gets clicked inside my component. Having an event that fires whenever any button is clicked turns out to be easy: I just need to handle onclick in some outer div in the outermost component.

<div onclick="{!c.buttonClicked}">
     ...
     <c:innerComponent.../>
     ...
</div>

Clicking a button on anything inside the div, including inside the c:innerComponent, will fire the buttonClicked event, which is exactly the behavior I'm looking for. The problem I am having is that event.getSource() is not available in this event:

buttonClicked: function (component, event)
{
    var source = event.getSource(); // runtime error, there is no getSource() function
}

From what I can tell, this is a limitation of the LockerService, though I was also under the impression that LockerService only completely blocks cross-component communication like this between namespaces, not within a single namespace (which is the case here). I've also looked at event.currentTarget to try to find information about the clicked button, but that seems to only refer to the outer div that was clicked.

Is there any way to get information on the button that was actually clicked from here?

  • You might try to think in terms of using Aura Attributes and associating them with the onClick events of your inner components. That approach might help get you someplace. That's the general approach to take to when you want to update between components when an event fires without using an Event Handler for the entire Window. – crmprogdev Jan 31 at 4:26
  • Yes, I do understand that the normal way you should communicate between components is using some sort of infrastructure like what you just mentioned. However, the point of what I want to do with the onclick event with the outer div is to have a lightweight solution that logs all button activity without requiring the developer to remember to do this manually for each button that he/she adds. This is a somewhat elegant solution that does exactly what I need with no boilerplate around making every action a lightning event, if I can get information about the button that was actually clicked. – AlexKven Jan 31 at 17:09
  • That wasn't what I was trying to convey. Where I was going with the comment was that if you can look for the Aura Attribute, that would be one way of attempting to do what you're trying to accomplish. There's also the potential to take any onclick event that doesn't have an attribute associated with it, assign an attribute to it you'd use with your service which would cause it work for you in all of your components. It's like building in a "hook" for your service to access just as exception/error handlers often do. – crmprogdev Jan 31 at 19:02
  • Ok, this sounds very interesting. My apologies for misunderstanding the original comment. Do you know how I could "associate" my Aura attribute with the onclick handler the way you describe? I haven't been able to figure out how to do this. – AlexKven Jan 31 at 19:12
  • 1
    @AlexKven as far as I know - what you are trying to achieve is not possible. Even if you succeed in getting the id of the clicked element - it would be the element that the onClick event is triggered from (your top div element) and not from the element inside that you clicked upon. I cannot think of a simple solution like you are suggesting – Itai Shmida Feb 4 at 7:07

Your Answer

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

Browse other questions tagged or ask your own question.