如何始终获取 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 与外部 div 大小相同。

Answer 1

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

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