Event from a Lightning Component has an event.target with DOM properties missing – what is going on?

With this markup in a component:

<tr data-id="{! item.id }" onclick="{! c.rowSelect }">
    <td>{! item.name }</td>
    <td><ui:outputText value="{! item.type }"/></td>
    <td>{! item.phone }</td>
    ...

a click in the first or third td cell generates an event that has an event.target that has all the normal DOM properties such as parentNode and a toString() function that outputs:

SecureElement: [object HTMLTableCellElement]{ key: {“namespace”:”c”} }

A click on the second td cell (that contains a component) generates an event that has an event.target that has no properties and a toString() function that outputs:

SecureObject: [object HTMLSpanElement]{ key: {“namespace”:”c”} }

(The span appears to be a wrapper for the content emitted by the component.)

Can anyone explain what is going on – why the missing properties? Or at least suggest a way to get to the DOM tr element which is where the Id value I need for my logic is located?

Answer

The properties are missing because you are trying to reach into a component from a parent component, which is what Lightning is now trying to prevent you from doing.

It looks like the framework is happy to dispatch the event, but is not able to show you any info about it.

If you want to get the {!item.type} property, perhaps put it inside the td using a data-item property as well as inside the ui:outputText. That way you should be able to retrieve it.

However, you won’t be able to retrieve it by using event.target – maybe you should put an onclick on that particular td and reference the td data-item property (don’t forget to cancel the event if it comes from this td once you’ve caught it).

eg:

<td data-item="{! item.type}" onclick="{!c.rowSelect}"><ui:outputText value="{! item.type }"/></td>

Attribution
Source : Link , Question Author : Keith C , Answer Author : Caspar Harmer

Leave a Comment