I'm facing a wierd UI issue when I use-

<a href="www.someLink.com" onclick="c.controllerFunction" data-attriVal="abc">
        <img src="resource/image.PNG"/>

In my lightning controller, after image click I'm not able to get the attriVal by using- Event.target.getAttribute('data-aatriVal');

But the same I'm getting when I replace the tag with some text value-

<a href="www.someLink.com" onclick="c.controllerFunction" data-attriVal="abc">

Please help!


Due to event bubbling, when you click on the img tag anchor tag's onclick event is being fired. As a result,

event.target => points to the element where the click originated which is the <img/>. So doing event.target.getAttribute("data-attriVal") will return null

event.currentTarget => points to the element which registered and called the click event's function (i.e <a />). So doing event.currentTarget.getAttribute("data-attriVal") will return abc

Look at this fiddle.

| improve this answer | |

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.