Mima Design MemottoWEB DESIGNER · mima

JavaScriptのイベント伝播を理解してバグを防ぐ方法

ボタンをクリックしただけなのに、親要素の処理まで実行される。モーダルを閉じたいのに、背後のリンクも反応する。こうした現象の多くは、JavaScriptのイベント伝播を正しく把握できていないことから起こります。 Wordpress From Iphone.

イベントは発生した要素だけで完結するとは限りません。DOMツリーを移動しながら複数の要素に通知されるため、イベントリスナーの登録場所や処理の順番によって、画面の挙動が変わります。

Webデザインと実装を行き来していると、見た目では判断しにくいクリック処理の不具合に遭遇します。スマートフォン向けのUIや、複数のカードを持つ画面では、伝播の仕組みを知っていることが保守性にも直結します。

イベントが移動する三つの段階

イベント伝播には、キャプチャリングフェーズ、ターゲットフェーズ、バブリングフェーズがあります。たとえば親要素の中にボタンがある場合、クリックイベントはまず画面全体に近い親からボタンへ向かい、ボタンに到達したあと、再び親方向へ戻ります。

通常のaddEventListenerはバブリングフェーズで動作します。そのため、ボタンを押したときにボタン自身の処理だけでなく、親のクリック処理も実行されます。親から子へ向かう段階で処理したい場合は、第三引数にtrueを指定するか、{ capture: true }を利用します。

parent.addEventListener('click', handleParent);
button.addEventListener('click', handleButton);

この例では、ボタンの処理後に親の処理が呼ばれます。処理順を確認したいときは、各ハンドラーにconsole.logを入れ、どのフェーズで何が起きているかを可視化すると原因を追いやすくなります。

バブリングを利用したイベント委譲

イベント伝播は、止めるべき問題を生むだけではありません。親要素に一つだけリスナーを登録し、子要素の操作をまとめて処理する「イベント委譲」に活用できます。リスト項目が後から追加される画面でも、親のリスナーを使える点が便利です。

list.addEventListener('click', (event) => {
  const item = event.target.closest('[data-item]');
  if (!item || !list.contains(item)) return;

  console.log(item.dataset.item);
});

event.targetは実際にクリックされた最深部の要素です。アイコンやspanを含むボタンでは、event.currentTargetとの違いを意識してください。複数の要素に同じ処理を設定するより、イベント委譲のほうがリスナー数を抑えられます。実装例や制作記録はMimaのポートフォリオでも確認できます。

preventDefaultとstopPropagationの違い

リンクの遷移やフォーム送信など、ブラウザ標準の動作を止めるのがpreventDefault()です。一方、親や祖先要素へのイベント通知を止めるのがstopPropagation()です。目的が異なるため、リンクの遷移を止めたいからといって、必ずしも伝播まで止める必要はありません。

さらに、同じ要素に登録された別のリスナーまで止めたい場合はstopImmediatePropagation()を使います。ただし強力な制御なので、安易に追加すると別の機能を壊しやすくなります。処理の責任範囲を整理し、可能なら条件分岐やHTML構造の見直しで解決するほうが安全です。

link.addEventListener('click', (event) => {
  event.preventDefault(); // 遷移だけを止める
});

モーダル内のクリックが背後のカードに伝わるケースでは、モーダルの内側でstopPropagation()を使う方法があります。ただし、閉じるボタンやアクセシビリティ用の操作まで妨げないよう、停止する範囲を限定してください。

モバイルUIで起きやすい伝播の落とし穴

スマートフォンでは、タップ領域の中に画像、アイコン、テキストなど複数の要素が入ることがあります。event.targetだけを前提にすると、クリック対象によって条件分岐が不安定になります。closest()で操作対象となるボタンやリンクを探すと、内部構造の変更にも対応しやすくなります。

タッチイベントとクリックイベントを重複して登録すると、同じ操作で処理が二重に走ることがあります。ポインターイベントを利用する場合は、対応ブラウザと既存コードの組み合わせを確認し、同一の状態変更が複数回起きない設計にします。Railsで画像アップロード機能を扱った実装メモのように、画面操作とデータ処理が連動する機能では、二重送信の防止も重要です。

デバッグ時には、イベントの種類、target、currentTarget、defaultPreventedをログに出すと状況を整理できます。ブラウザの開発者ツールでイベントリスナーを確認する習慣も、見えにくい親要素の処理を見つける助けになります。

安全なイベント処理の確認ポイント

実装前にイベントの流れを図にし、どの要素が状態変更を担当するか決めておくと、後からstopPropagation()を足す場面が減ります。特にカード全体をリンクにし、その中に別のボタンを配置する構造では、HTMLの意味と操作仕様を先に整理しましょう。

  • targetとcurrentTargetを使い分ける
  • 標準動作と伝播を別々に制御する
  • 同じ操作で処理が二重実行されないか確認する
  • 動的に追加される要素にはイベント委譲を検討する
  • キーボード操作や画面読み上げへの影響を確認する

テストでは、子要素をクリックした場合、余白部分をクリックした場合、キーボードで操作した場合を分けて確認します。イベント伝播の制御を最小限に留めるほど、他のコンポーネントや将来の機能追加に与える影響も小さくなります。

イベント伝播は、単なるJavaScriptの細かな仕様ではなく、DOM構造とUI設計をつなぐ基礎知識です。次にクリック処理を実装するときは、伝播の方向、標準動作、イベントの責任範囲を一つずつ確認し、意図した操作だけが実行されるコードに整えていきましょう。-offsetof