html5 – 为什么在元素的子元素转换结束时可以运行transitionend事件?

前端之家收集整理的这篇文章主要介绍了html5 – 为什么在元素的子元素转换结束时可以运行transitionend事件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我将transitionend事件绑定到div1.当div1的转换结束时,事件就会运行.这里没有问题.

我遇到了一个特例:

我为这个div1添加了3个段落,当每个段落的转换结束时,div1的transitionend事件也会运行.所以transitionend事件运行了4次. >.<

在div1的transitionend事件的侦听器函数的主体中,我可以看到event.target!== this.我觉得这很荒谬!

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

谁能解释为什么元素的transitionend事件也可以被这个元素的children元素触发?

谢谢.

解决方法

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

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

event.stopPropagation()

在IE9之前的IE中:

window.event.cancelBubble = true;

猜你在找的HTML5相关文章