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

Question

我将 transitionend 事件绑定(bind)到 div1。当 div1 的转换结束时，事件开始运行。没问题。

我遇到了一个特例:

我在这个div1中添加了3个段落，当每个段落的过渡结束时，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;