SkipNavigationHTMLCSSJavaScriptその他CSSのtransitionendイベントが意図しないタイミングで発生する問題とその原因カテゴリCSSJavaScriptタグtransition公開日時2024年10月16日JavaScriptでtransitionendイベントを扱う際に、意図しないタイミングでイベントが発生するという問題に遭遇することがあります。今回は、その原因と解決策について詳しく解説します。ある親要素に対してトランジションを設定し、transitionendイベントをリッスンしているとします。実際には期待しないタイミングでイベントが発火し、思わぬ挙動を引き起こすことがあります。原因:子要素のtransitionendイベントこの問題の主な原因は、子要素のtransitionendイベントが親要素にも伝播していることです。イベントのバブリングにより、子要素で発生したイベントが親要素にも届いてしまうため、親要素のイベントリスナーが意図せずに反応してしまいます。ended');});このコードでは、親要素と子要素の両方にトランジションが設定されています。子要素のトランジションが終了すると、親要素のtransitionendイベントリスナーも発火してしまいます。解決策イベントの発生元を特定するtransitionendイベントのコールバック関数にはEventオブジェクトが渡されます。event.targetプロパティを利用して、イベントが発生した要素を特定できます。}});このように条件分岐を追加することで、親要素自身のトランジション終了時にのみ処理を行うことができます。イベントの伝播を止める(場合によっては非推奨)子要素のイベントリスナー内でevent.stopPropagation()を使用して、イベントのバブリングを止める方法もあります。この方法は他の機能に影響を及ぼす可能性があるため、注意が必要です。event.stopPropagation();});コメントコメントはありませんお名前コメントコメントを送信するお役立ち男フロントエンド専門。フリーランスで10年以上活動しています。トグルで有効/無効を切り替えられますが、ローカルだとその設定ページが見当たりませんでした。いうエラーが返ってきました。できない状況が発生しました。Web制作において役立つブログ。