エレメントの子の遷移が終了したときに遷移イベントを実行できる理由を教えてください。

Question

div1にtransitionendイベントをバインドしました。 div1のトランジションが終了すると、イベントが実行されました。何も問題ない。

私は特別なケースに遭遇：各段落の移行が終了したとき、私は、このdiv1に3つの段落を追加

を、div1のtransitionendイベントも走りました。したがって、transitionendイベントは4回実行されました。 >。

<はdiv1さんtransitionendイベントのリスナー関数の体では、私が見ることができるevent.target！== this。私はそれがかなりばかげていると感じる！

ChromeとFirefoxの両方にこの問題があります。だから、これはブラウザのHTML5仕様実装のバグではないと思います。

要素のtransitionendイベントがこの要素の子要素によってもトリガーされる理由を説明できる人はいますか？

ありがとうございます。

Answer 1

イベントバブリングと呼ばれます。子要素で発生する多くのイベントは、イベントハンドラが元のオブジェクトに対して呼び出された後、デフォルトで親を介してバブルアップされます。 eventオブジェクトを調べることによって気付いたようにバブリングを検出することも、ソースオブジェクトでイベントを処理するときに伝播を停止してバブリングを防ぐこともできます。

IEを他のブラウザと比べて伝播を停止することは、IEの場合と異なります。他のブラウザでは、あなたが呼び出す：IE9前にIEで

event.stopPropagation() 

：

window.event.cancelBubble = true;