Javascript：getElementsByClassName：如何只获取父母

Question

我有这样的html：

<div class="item">
    <img class="item-image" src="${item.getImage()}"/>
    <p>${item.getName()}</p>
</div>

和 Javascript：

var classname = document.getElementsByClassName("item");

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', (e) => {
        addBorder(e.target);

    });
};

function addBorder(item) {
    if (item.tagName = 'DIV') {
        item.style.border = "3px solid red";
    }
}

当我单击项目时，它会添加一个红色边框。但是，如果单击碰巧触摸图像或段落，则会在它们周围绘制红色边框。我试图通过在里面添加 if 条件来防止它addBorder，但它没有帮助。有没有办法只使父 div 带有红色边框，即使点击发生在里面p或img？

Answer 1

因为item.tagName = 'DIV'意味着：分配DIV给item.tagName. 所以你只需要替换item.tagName = 'DIV'withitem.tagName === 'DIV'进行比较。

if (item.tagName === 'DIV') {
    item.style.border = "3px solid red";
}