Question

html

<ul>
    <li><a href="#" >Link</a>
        <ul>
            <li><a href="#" >Link</a></li>
            <li><a href="#" >Link</a></li>
        </ul>
    </li>
</ul>​

jQuery

$(function(){
    $('ul').click(function(event){
        alert(event.target);
        return false;
    });
});

Can someone punch me to the head and tell me WHY on earth event.target is giving me a url when I click on anchors? I’m expecting it to give me [object HTMLAElement]. Just like [object HTMLLIElement] when you click li element. sample fiddle.

---

I have read this link, jquery-anchor-click-this-e-target-returns-url, but doesn’t seem to answer my question.

Answer 1

Everything is ok! It’s just a representation of any link. You can still use event.target.href or even event.target.id and so on.

Some elements, such as HTMLAnchorElement, have special toString functions that prevent you from finding their class name easily. If you type javascript:alert(document.links[0]) in the location bar, you will see the URL of the first link instead of its class name. The way to get around this problem is to use the default toString function on the object document.links[0], like so: javascript:alert(window.toString.apply(document.links[0])).

From here.