javascript - Javascript:getElementsByClassName:如何仅获取 parent

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

当我单击项目时，它会添加一个红色边框。但是，如果单击碰巧碰触到图像或段落，则会在它们周围绘制红色边框。我试图通过在 addBorder中添加if条件来防止这种情况，但这没有帮助。即使点击恰好落在 p或 img内，是否有办法仅使父div变为红色边框？

Answer 1

因为item.tagName = 'DIV'的意思是:将DIV分配给item.tagName。因此，您只需要用item.tagName = 'DIV'替换item.tagName === 'DIV'进行比较即可。

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