event.currentTarget getting undefined on Chrome

Question

I am trying to get the attribute value of the element clicked in my javascript code but for some reason the value I am getting is undefined.

This is the code:

HTML:

<c:button buttonLabel="Skype" buttonClass="valmetSecondaryButton noMargin" id="I_WANT_THIS_VALUE" onclick="{!c.openSkype}"/>

JS:

console.log(event.currentTarget.id);

This is working on Internet Explorer, havent tested in Firefox, but not working in Chrome. Also just so you know I am using Lightening Component, Salesforce!

Answer 1

Problem solved:

<span id="{!v.teamMember.email}" onclick="{!c.openSkype}">
                        <c:button buttonLabel="Skype" buttonClass="valmetSecondaryButton noMargin"/>
</span>

Thanks you all for your interest on solving this!

This link helped me solve the problem: https://salesforce.stackexchange.com/questions/160830/lighting-component-get-html-button-id-in-controller-js-working-in-firefox-not

Event Bubbling

Answer 2

Although not directly related to salesforce-lightning as your question is tagged, this thread is the first result when searching for evt currentTarget undefined so i'll leave my general answer here:

I've encountered a weird issue where event.currentTarget was undefined when it definitely shouldn't be - and it even appeared to be defined at the start of the event handler, but just disappear later.

It turns out that evt.currentTarget may disappear from the event when execution is passed on from the event - for example when await ing a network request or trying to access the event from a setTimeout.

From MDN docs:

Note: The value of event.currentTarget is only available while the event is being handled. If you console.log() the event object, storing it in a variable, and then look for the currentTarget key in the console, its value will be null.

This can also be demonstrated with the following code at the top of the event handler:

console.log(e.currentTarget);
setTimeout(()=> console.log(e.currentTarget), 0);