javascript - 如何在 JavaScript 中始终获取最外层元素

Question

我有一堆 div 元素，它们都有一个特定的 id。这些 div 里面还有 div。现在，如果我向最外面的元素添加 onclick 监听器，它不会返回其 id。也许一个例子可以更好地解释:

<div id="id1"><div id="bla1"></div></div>
<div id="id2"><div id="bla2"></div></div>
<div id="idn"><div id="blan"></div></div>

document.getElementById("id1").onclick = displayId;
document.getElementById("id2").onclick = displayId;
document.getElementById("idn").onclick = displayId;

function displayId(evt) {
    console.log(evt.target.id);
}

如果我现在单击其中一个 div，它会显示内部 div 的 id。我怎样才能让它始终显示外部 dviv 的 id？

注意:内部 div 的大小与外部的大小相同。

Answer 1

使用 this 而不是 evt.target 来引用处理程序绑定(bind)到的元素。

function displayId(evt) {
    console.log(this.id);
}