投稿日:2024/10/18 最終更新日:2024/10/18
【React】子要素をクリックしたときに親要素もクリックされたことになるのはなぜ？対処法も併せて解説
どういうことか？
下のコードのように親要素と子要素の両方にonClickイベント処理を指定した場合、子要素のonClick処理に合わせて親要素のonClick処理も動作してしまう事態が発生した。
<div onClick={() => console.log("親要素をクリック")}>
<button onClick={e => console.log("子要素をクリック")}>ボタン</button>
</div>コンソールを見ると「親要素をクリック」と「子要素をクリック」が出力されているはず。
これを「バブリング」という
バブリングとは先ほどのように子要素をクリックした場合に親要素にも伝播するといったDOMの内側から外側にイベントが実行されていくことをいう。
これはデフォルトで備わっている設定であり、設定を変更することで外側から内側にイベントを実行させる「キャプチャリング」も使用することができる。
解決方法
バブリングを防ぐにはJavaScriptの stopPropagation()関数を使用する。
これをイベントハンドラに噛ますと、実行時にそのイベントハンドラは実行されて親要素以上には伝播しないように仕向ける事ができる。
<div onClick={() => console.log("親要素をクリック")}>
<button onClick={e => { e.stopPropagation(); console.log("子要素をクリック");}}>ボタン</button>
</div>
