event.target not returning the exact element that has been clicked

Question

I'm trying to use event.target to find the exact element that's been clicked. I'm working with jQuery Mobile, and the links are in navbars.

When the page initially loads, event.target does it's job and returns the correct 'a' element (there's a programmatic click in there causing that) . However, when you click on a link, event.target returns a 'span' element and not the 'a' element that's been clicked.

If you click the surrounding area of the text part of the link, the correct 'span' element is returned by event.target.

I need event.target to return the exact 'a' element that's been clicked, no matter if you click directly on the link or not, as long as the user clicks in the given area of the link (including the 'span' areas).

You can see it in action here

Let me know if I need to provide any more information. Thanks!

Answer 1

You can try event.currentTarget instead of event.target

Answer 2

Use this:

   var target=(event.target.tagName=='A')
                ? event.target
                : $(event.target).closest('a')[0]

it will return the ascendent A-element when you click on a child of the link

or simply: this