Vue: v-on:click with target not in the correct element?

[cnicodeme]

Hi,

I have a template like :

<a v-on:click="action($event)">
    <span>entry 1</span>
    <span>entry 2</span>
</a>

and the event.target in action is either the first or second span, never the a.
Using jQuery, I know .target is always the intended (listened) element.

Is this not the case here or is there an issue?

[yyx990803]

http://blog.bittersweetryan.com/2013/04/a-quick-look-at-etarget-and.html

[cnicodeme]

My bad. I analyzed the event but didn't saw the currentTarget value, hence my question.

Thank you for you quick answer.

[kosinix]

Somewhat related. I stumbled upon this thread when I searched why event.target is not the "clicked element", and why vue's event.currentTarget is always null. Turns out its due to how console.log works:

Thus:

console.log(event); // When expanded on browser's console, currentTarget is always null.

However:

console.log(event.currentTarget); // Does contain the element clicked.

Stackoverflow explanation: http://stackoverflow.com/questions/26496176/when-loggin-an-event-object-currenttarget-is-null-but-when-logging-event-curre
So its not a bug in vue but caused by how JS and console.log works.

Just leaving this here for other users who will have the same issue and not waste hours scratching their head. Hope this helps.

[matrunchyk]

I was searching for a solution for catching relatedTarget for non-focusable elements, such as li, p, div, etc. So if you are searching the same and ended up reading this thread too, please consider taking a look at this StackOverflow topic or JSFiddle.

[nikhilhirulkar]

Thank you...