バブリングとは？意図せぬイベント発火の真相と防止策を徹底解説

バブリングとは？意図せぬイベント発火の真相と防止策を徹底解説についての真相をご紹介します。

Web制作の現場検証において、最も頻発する不具合が「意図せぬイベント発火」です。その原因の9割以上は、開発者がバブリングフェーズの連鎖を意識せずに親子関係をマークアップしたことに起因します。

代表的な事例が、ECサイトやニュースメディアで多用される「クリック可能なカード型UI」です。カード全体を<div>で囲み、記事詳細へのリンク処理を付与したとします。そのカードの片隅に「お気に入り登録」や「共有」といった独立したアクションを行う子ボタンを配置した場合、ユーザーがお気に入りボタンをクリックした瞬間に、ボタンの処理と同時にカード全体の詳細遷移処理まで発火してしまいます。

大手受託開発会社のシニアエンジニアの手記によると、「画面上の見た目ではボタンと背景が整然と分かれているように見えても、DOMの入れ子構造上では完全に上下の親子関係にあるため、親要素側で受け取ったイベントが『自分自身が押されたのか、中身の子要素が押されたのか』を識別できずに暴走する」と指摘されています。これが、JavaScriptバブリングの原因が生み出す代表的なバグの構図です。