I'm sorry if I worded the title wrong, I didn't know how to say it in short.

My problem is, I have this code:

document.addEventListener("click",changeDesc,true);
function changeDesc() {
    if(event.target.className == "item")
    {
        var CurrentItem = document.getElementById(event.target.id);
        var CurrentDescription = CurrentItem.getElementsByClassName("itemdescription")[0].textContent;
        var ItemBox = document.getElementsByClassName("infobox")[0];
        ItemBox.innerHTML = CurrentDescription;
    }
}

that checks if the thing the user clicked on is a class called 'item', and if it is, it changes the text contents of a div.

The item is formatted like this:

<li class="item" id="iron_sword">
    <img src="1.png" />
    <p class="itemdescription">Description 1</p>
</li>

If I click the area that is covered by the 'li' element itself (stretches horizontally fully), it works perfectly. However, if I try to click the image INSIDE of the li (image 1.png), it doesn't do anything.

This confuses me because the image is inside of the li, but I think I get why it's happening.

But what I don't get is how I should fix this. Here's a jsfiddle so you can tinker with the code and if you don't understand, maybe you can see what I mean.

/ (Try to click on any area directly to the left or the right of the images, aka the full area of the li. You can see it does what I want it to do, but it doesn't work if I click the images themselves.

NOTE: I'm not using jquery. My javascript is external.

I'm sorry if I worded the title wrong, I didn't know how to say it in short.

My problem is, I have this code:

document.addEventListener("click",changeDesc,true);
function changeDesc() {
    if(event.target.className == "item")
    {
        var CurrentItem = document.getElementById(event.target.id);
        var CurrentDescription = CurrentItem.getElementsByClassName("itemdescription")[0].textContent;
        var ItemBox = document.getElementsByClassName("infobox")[0];
        ItemBox.innerHTML = CurrentDescription;
    }
}

that checks if the thing the user clicked on is a class called 'item', and if it is, it changes the text contents of a div.

The item is formatted like this:

<li class="item" id="iron_sword">
    <img src="1.png" />
    <p class="itemdescription">Description 1</p>
</li>

If I click the area that is covered by the 'li' element itself (stretches horizontally fully), it works perfectly. However, if I try to click the image INSIDE of the li (image 1.png), it doesn't do anything.

This confuses me because the image is inside of the li, but I think I get why it's happening.

But what I don't get is how I should fix this. Here's a jsfiddle so you can tinker with the code and if you don't understand, maybe you can see what I mean.

https://jsfiddle/c36uwwmr/1/ (Try to click on any area directly to the left or the right of the images, aka the full area of the li. You can see it does what I want it to do, but it doesn't work if I click the images themselves.

NOTE: I'm not using jquery. My javascript is external.

• javascript
• html

Share Improve this question Follow edited Mar 13, 2017 at 10:53 Nope 22.3k88 gold badges4949 silver badges7373 bronze badges asked Mar 13, 2017 at 10:52 SnakeBlockSnakeBlock 2311 gold badge11 silver badge33 bronze badges 1

• document.getElementById(event.target.id); is pretty pointless. You should just use event.target – Bergi Commented Mar 13, 2017 at 13:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

if I try to click the image INSIDE of the li (image 1.png), it doesn't do anything.

Of course, not because then the event.target is the image element not the list item with the class. If you want to do event delegation, you have to check all the ancestors of the event target. You'll want to do something like

function changeDesc() {
    for (var currentItem = event.target
        ;currentItem != event.currentTarget && currentItem != null
        ;currentItem = currentItem.parentElement
    ) {
        if (currentItem.className == "item") { // or currentItem.classList.contains("item")
                                               // or currentItem.matches(".item")
            …
            break;
        }
    }
}

(see updated demo)