This is probably javascript 101 but I can't figure out a solution to this. Consider the following fiddle

My js sets the click event on the a tag using the class .show-modal

and yet my console log shows that the event target was actually the img tag. I need the event target to be the a tag for various reasons.

Two things about this that present a challenge for me:

1. The only way I've been successful in getting the event target to be the a tag is to separate the img tag outside of it (i.e. make it a sibling of the a tag, not a child anymore) and then set the a tag position: absolute, give it dimensions and position over the img. I think this approach has got to be the least desirable but how else can I achieve my goal?

2. What really confuses me is how can the event target be different from the element upon which I attached the click event? Shouldn't they be the same? If they should be the same, how could my function be called if the element receiving the click event is NOT the one I attached my click event to?

This is probably javascript 101 but I can't figure out a solution to this. Consider the following fiddle

My js sets the click event on the a tag using the class .show-modal

and yet my console log shows that the event target was actually the img tag. I need the event target to be the a tag for various reasons.

Two things about this that present a challenge for me:

1. The only way I've been successful in getting the event target to be the a tag is to separate the img tag outside of it (i.e. make it a sibling of the a tag, not a child anymore) and then set the a tag position: absolute, give it dimensions and position over the img. I think this approach has got to be the least desirable but how else can I achieve my goal?

2. What really confuses me is how can the event target be different from the element upon which I attached the click event? Shouldn't they be the same? If they should be the same, how could my function be called if the element receiving the click event is NOT the one I attached my click event to?

• javascript
• jquery
• css
• html

4 Answers 4

Use

e.currentTarget -- Gives the element to which event is bound. (Can use this as well)

e.target -- Gives the element that triggered the event.

Check Fiddle

The issue here is your image almost entirely occupies the anchor. So the anchor tag will never be the e.target ..

Check out a example where the heights are different.

Check Fiddle

The event target is the element which triggered the event, not necessarily the element which the handler is attached to.

When you click on the image, the event propagates up the DOM tree, triggering the click handler bound to the anchor.

If you need the anchor, you can use this.

You can use this instead of target: DEMO

$(document).ready(function(){
    $('.show-modal').on('click',function(e){
        console.log(this);
    });
});

The event is triggered on an img tag, but the listener's context is a tag with the show-modal class, therefore the callbacks context will be where the listener was attached:

$('.show-modal').on('click', function(e)
{
    console.log(e.target);
    console.log($(this));//the .show-modal tag
});

That's all. If ever you find yourself delegating the event, and you want to check if the element clicked is the child of some element with ID x, or class Y:

$(document).on('click','img',function(e)
{//this catches all clicks on all imgs in your page
    console($(this) === $(document));//true
    console.log(e.target);//img tag
    if ($(e.target).closest('.show-modal'))
    {
        console.log('yes, clicked image is child of .show-modal element'):
    }
});