Getting original element from onclick?

Question

I am trying to implement an onclick listener that will take the div clicked and get the data-id from the element and call an apex method with it. Here is my code snippet.

<aura:iteration var="convo" items="{!v.conversations}">
                <a href="#" data-id="{!convo.Id}" onclick="{!c.fireAppEvent}" style="text-decoration:none;">
                <div class="{!convo.ReadFlag__c ==  True ? 'slds-box slds-no-flex
 slds-theme--shade' : 'slds-box slds-no-flex slds-theme--default'}" >
                    <li class="slds-list__item">
                        <div class="slds-media slds-tile">
                            <div class="slds-media__figure">
                                <img src="/resource/SLDS100/assets/images/avatar2.jpg" style="height:60px;" alt="Placeholder" />
                            </div>

                            <div class="slds-media__body ">
                                <p class="slds-tile__title slds-truncate">
                                    {!convo.Name}
                                </p>
                                <ul class="slds-tile__detail slds-list--horizontal slds-has-dividers slds-text-body--small">
                                    <li class="slds-truncate slds-list__item">From : {!convo.FromNumber__c}</li>
                                    <li class="slds-truncate slds-list__item">To : {!convo.ToNumber__c}</li>
                                </ul>

                                <div class="{!convo.ReadFlag__c == True ? 'slds-media__body slds-text-body--regular' : 'slds-media__body slds-text-header--small'}">
                                    <p class="slds-truncate">{!convo.Messages__r[0].MessageText__c}</p>
                                    <p>{!convo.Messages__r[0].Direction__c == 'TOSF' ? 'Received at' : 'Sent at'} : {!convo.Messages__r[0].Time__c}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
               </a>     
            </aura:iteration>

and my JS code

fireAppEvent : function(cmp, event) {
        var appEvent = $A.get("e.c:ConversationEvent");
        var convoId = event.target.getAttribute("data-id");
        console.log(event.target);
        console.log(convoId);
        appEvent.setParams({
            "message" : convoId });
        appEvent.fire();
    }, 

The problem is that it uses the element that I clicked on instead of the div that I set the onclick to. By that I mean if I click on the text part of the div, the event.target is the

tag, if I click on the image, the event.target is the tag, but what I want is for it to always get the data from the original tag.

How can I go about doing this?

Answer 1

Lightning component framework events are different than individual element events.

There are couple of ways to solve your issue ,

1.Break your component into another component and use attribute instead ,something like this answer

2.Use aura:id to assign a unique Id to your element and use find function

Answer 2

It works if you make one of your row elements into a link. Here is a sample from a list of email templates.

<td> 
<div class="slds-cell-wrap">
        <a href="javascript:void(0);" id="{!template.Id}" onclick="{!c.trClickHandler}">{!template.Name}</a>
</div>
</td>

Then in the component controller

trClickHandler : function(component, event, helper) {
    var target = event.target;
    var rowId = target.getAttribute("id");
    console.log("In tr click handler with ", rowId);
}