javascript - 为什么 JavaScript 向我的事件处理程序发送一个元素，而该元素没有事件？

Question

这个 html:

<span id="mySpan"><img src="images/picture.png" alt="Some nice alt text" />
 Link text</span>

此 JavaScript 获取包含图像和文本的 span，然后使其可点击:

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);
   
function myEvent(e){
 var obj = e.target;
}

如果我单击“链接文本”，则 myEvent() 中的 obj 就是跨度。如果我点击图像，那么 obj 就是图像元素!图像本身没有事件。那么为什么它不总是传递给事件处理程序的跨度呢？

顺便说一句，为了简单起见，它被精简了，因此它只适用于 Firefox。

此外，如果您可以更连贯地表述问题，请随时编辑我的问题标题。

Answer 1

事件是有效继承的。

当一个事件处理程序被添加到一个元素时，所有的子元素也会受到该事件处理程序的影响，因为它们在元素内部。所以你必须小心处理事件。

在您的情况下，您只是真的想检查在 myEvent 中点击了什么:

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
    if (e.target === spanVar) // This will make the img non clickable
        var obj = e.target;
}

Try it out with this jsFiddle

如果您想检索最初附加了点击处理程序的元素，则只需使用 this

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
    var obj = this;  // This is the object that had the click handler attached
}

Try it out with this jsFiddle

问题真的不是事件冒泡。父元素的所有子元素有效地接收其父元素的事件处理程序。如果子项和父项附加了不同的处理程序，事件冒泡就会发挥作用，但您只想解雇子项的处理程序。

另一个解决方案是更改您的 HTML:

<div>
    <img src="images/picture.png" alt="Some nice alt text" />
    <span id="mySpan">Link text</span>
</div>