为什么当元素的子元素过渡结束时，transitionend事件会被触发？

Question

我将transitionend事件绑定到了div1上。当div1的过渡结束时，该事件就会触发。这没有问题。

我遇到了一个特殊情况：

我向这个div1添加了3个段落，当每个段落的过渡结束时，div1的transitionend事件也会触发。因此，transitionend事件会被触发4次。>.<

在div1的transitionend事件的监听函数中，我可以看到event.target！== this。我觉得这很荒谬！

Chrome和Firefox都有这个问题。所以我猜这不是浏览器HTML5规范实现的bug。

有人能解释一下为什么一个元素的transitionend事件也可以被其子元素触发吗？

谢谢。

- weilou

---

我无法获取这个问题的复现代码。但我可以确定在transitionend事件的监听函数体中看到了event.target !== this。我无法理解这个奇怪的问题。你认为这是Chrome和Firefox的一个bug吗？ - weilou

Answer 1

这被称为事件冒泡。许多在子元素上发生的事件默认情况下会在事件处理程序在源对象上调用后通过父级向上传递。您可以通过检查event对象来检测冒泡，也可以通过在源对象上处理事件时停止传播来防止冒泡。

在IE中与其他浏览器不同的一件事是停止传播的方法。在其他浏览器中，您调用：

event.stopPropagation()

在IE9之前的IE浏览器中：

window.event.cancelBubble = true;

- jfriend00

---

谢谢你的回答。首先，我认为transitionend事件应该是一个特殊的事件。它不应该被添加到事件冒泡链中。因此，W3C应该改进他们的HTML5 transitionend事件规范。其次，我真的没有将transitionend事件绑定到3个段落上。所以...这似乎是Chrome和Firefox的HTML5规范实现中的一个bug？我只是将transition设置为3个段落。 - weilou

@WeiLou - 很多事件会冒泡（如点击、按键等），这是浏览器工作的方式，所以 transitionend 与其他事件没有区别。你只需要知道这一点并编写代码即可。如果您想知道该事件是否属于此特定对象，则只需查看 event.target 是否与您的对象匹配，或者是其他对象。在某些情况下，冒泡可以非常有用。 - jfriend00