当该元素没有事件时，为什么 javascript 将元素发送到我的事件处理程序？

Question

这个html：

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

此 javascript 获取包含图像和文本的跨度，然后使其可点击：

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

function myEvent(e){
 var obj = e.target;
}

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

顺便说一下，为了简单起见，它已被精简，因此仅在 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>

Answer 2

您需要阅读event bubbling。

Answer 3

你应该看看 Peter-Paul Koch 在 Quirksmode 上的this article，它正在详细回答你的问题