事件捕获未按预期运行答案

【问题标题】：Event capturing not functioning as expected事件捕获未按预期运行
【发布时间】：2016-03-16 22:03:58
【问题描述】：

我正在尝试在 JavaScript 中捕获事件，但它没有按预期工作。

例如，这里有一些 html ：

<div id="test">
    <a href="someimage.jpg"><img src="someimage.jpg" /></a>
</div>

和 JavaScript ：

document.getElementById("test").addEventListener("click", function(event) {
    event.preventDefault();
    console.log(event.target.nodeName);
}, true);

我的理解是，由于捕获设置为true，因此单击图像应将DIV 记录到控制台。相反，它会记录 IMG...

如果有人可以解释原因，或者指出解释它的文档，那就太好了。

【问题讨论】：

因为你明确说event.target？如果你用this 替换它，你会得到DIV...你可以认为event.target 是点击时光标前面的元素
它有效，我不敢相信它是如此简单......非常感谢

标签： javascript dom-events

【解决方案1】：

您似乎将 元素处理程序 与 元素目标 混淆了。

当您使用event.target 时，您指的是点击时光标正前方的元素。

相反，要引用事件的元素处理程序，您应该使用关键字this。

【讨论】：

【解决方案2】：

我的理解是，由于捕获设置为true，因此单击图像应将DIV 记录到控制台。相反，它记录IMG...

这完全是错误的。 event.target 将始终返回触发事件的元素，与事件处理阶段无关。请参阅spec。

【讨论】：