transitionendは、CSSのトランジションが完了したときに発火するイベントです。このイベントは、要素に適用されたトランジションが終了するたびにトリガされます。このイベントはバブリングする性質があるため、親要素までイベントが伝播することがあります。
イベントのバブリングは、DOMの階層構造に沿って親要素方向へとイベントが伝播する現象です。このため、特定の子要素でのイベント処理を行いつつ、親要素での伝播を阻止したい場合があります。
以下のコードは、transitionendイベントのバブリングを停止する例です：
$('.main-image img').on('transitionend webkitTransitionEnd oTransitionEnd', function(e) {
e.stopPropagation();
});このコードでは、jQueryのonメソッドを使用しています。また、各ブラウザのベンダープレフィックスに対応するため、複数のイベント名を指定しています。そして、e.stopPropagation()を使用してイベントのバブリングを停止しています。
この方法を利用することで、子要素でのtransitionendイベントの処理を維持しつつ、親要素でのイベント伝播を防ぐことができます。
“,
“excerpt”: “CSSのtransitionendイベントが親要素へのバブリングを行う現象と、それを阻止する方法について解説します。