html - 为什么当元素的子过渡结束时可以运行transitionend事件？

Question

transitionend我将一个事件绑定到div1. 当div1的过渡结束时，事件开始运行。这里没有问题。

我遇到了一个特殊情况：

我为此添加了 3 个段落div1，当每个段落的过渡结束时，div1'transitionend事件也会运行。因此，该transitionend事件运行了 4 次。>.<

在div1'transitionend事件的侦听器函数的主体中，我可以看到event.target!== this。我觉得很可笑！

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

谁能解释为什么元素的transitionend事件也可以由该元素的子元素触发？

谢谢你。

Answer 1

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

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

event.stopPropagation()

在 IE9 之前的 IE 中：

window.event.cancelBubble = true;