Javascript 如何在名为className的div内检查event.target.className图像？

对不起，如果我把标题写错了，我不知道简而言之该怎么说

我的问题是，我有以下代码：

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;
    }
}

它检查用户单击的对象是否是名为“item”的类，如果是，则会更改div的文本内容

项目的格式如下所示：

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

说明1

如果我单击“li”元素本身覆盖的区域（完全水平延伸），它将完美工作。 但是，如果我尝试单击li（image 1.png）中的图像，它不会做任何事情

这让我很困惑，因为图像是在李的内部，但我想我知道为什么会发生这种情况

但我不知道该怎么解决这个问题。 这里有一个JSFIDLE，您可以修改代码，如果您不理解，也许您可以理解我的意思

（试着直接点击图片左侧或右侧的任何区域，也就是li的整个区域。你可以看到它做了我想要它做的事情，但是如果我点击图片本身，它就不起作用了

注意：我没有使用jquery。我的javascript是外部的

如果我尝试单击li（image 1.png）内部的图像，它不会做任何事情

当然，这不是因为

事件.target

是图像元素，而不是类的列表项。如果要执行事件委派，必须检查事件目标的所有祖先。您需要执行以下操作

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;
        }
    }
}

---

（）

document.getElementById（event.target.id）

是毫无意义的。你应该只使用

事件。target

我试图使用你的解决方案，但它似乎不起作用。它似乎只是让它不会发生任何事情，即使我点击li。我也试图自己“重写”它，但没有骰子。@SnakeBlock Oops，它需要是

。parentElement

当然你也可以做

po内部事件：如果不想爬升DOM，则在子元素上无

。