为什么transitionend事件可以在元素的子级转换结束时运行？ [英] Why the transitionend event can be run when element's children's transition is ended?

问题描述

我将 transitionend 事件绑定到 div1 。当 div1 的转换已结束时，事件已运行。没有问题。

我遇到了一个特殊情况：

我在这个 div1 ，当每个段落的转换结束时， div1 的 transitionend 跑。因此， transitionend 事件运行了4次。 >。

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

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

任何人都可以解释元素 transitionend

解决方案

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

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

  event.stopPropagation（）
  

在IE9之前的IE：

  window.event.cancelBubble =真正; 
  

I bound a transitionend event to div1. When div1's transition was end, the event ran. There's no problem.

I encountered a special case:

I added 3 paragraphs to this div1, when each paragraph's transition is ended, div1's transitionend event also ran. So the transitionend event ran 4 times. >.<

In div1's transitionend event's listener function's body, I can see that event.target !== this. I feel it's pretty ridiculous!

Chrome and Firefox both has this problem. So I guess this is not a browser's HTML5 spec implementation bug.

Can anyone explain why an element's transitionend event also can be triggered by this element's children element?

Thank you.

解决方案

This is called event bubbling. Many events occuring on a child element will, by default, bubble up through the parents after the event handler is called on the originating object. You can either detect bubbling as you've noticed by examining theevent object or you can prevent bubbling by stopping the propagation when you handle the event on the source object.

Stopping propagation is one of those things that is different in IE vs. other browsers. In other browsers, you call:

event.stopPropagation()

In IE before IE9:

window.event.cancelBubble = true;

这篇关于为什么transitionend事件可以在元素的子级转换结束时运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！