Click event not bubbling when image clicked

Question

I have the following markup:

<ul>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
</ul>

Code from the fiddle:

$('.tgt').on('click', function (e) {
    if ($(e.target).hasClass('tgt')) {
        $(e.target).addClass('active');
    }
});

I attach a click handler using jquery's event delegation to all .tgt elements. For some reason, if I click on the image, the event does not bubble up to the li. Instead the event target is revealed to be the image.

Here's a fiddle: http://jsfiddle.net/CgC4V/

Why is the event not bubbling up to li.tgt?

Answer 1

The event is bubbling up, but the target element that you are testing with e.target is the element that was actually clicked as you can see here: http://jsfiddle.net/CgC4V/1/

That is the way that event bubbling is supposed to work - if the event didn't bubble your handler attached to the li elements would not be triggered.

You can use this to refer to the li that was clicked:

$('.tgt').on('click', function (e) {
    $('.active').removeClass('active');
    if ($(this).hasClass('tgt')) {
        $(this).addClass('active');
    }
});

You probably don't need to test whether the element has the tgt class though, because you already know it must be one of the li elements that originally had that class.

Demo: http://jsfiddle.net/CgC4V/3/

UPDATE for the comments:

"Should I then be accessing jquery.event.currentTarget instead? What about in cases where the context is not the jquery element. What property of jQuery.event has a reference to the correct element?"

Yes, event.currentTarget will give you the correct element. "Normally", and for the code you've shown, event.currentTarget would be the same as this, but if you were to do something to alter the value of this (e.g., if you've used $.proxy() or Function.prototype.bind()) then event.currentTarget will give you the right element.

Note also that sometimes event.currentTarget will be the same element as event.target (and this if you've not altered this) - in your example if you click the "dot" of the li element rather than the image then the target is the li itself.