特定の子要素のみにクリックイベントを割り当てたいときはe.stopPropagation();を使用する - Qiita

はじめに React×TypeScriptでアプリを作成しています。 「特定の要素だけをクリックしたい！」と思うことがあり、初めてe.stopPropagation();を使用したので概要を軽くまとめます。 e.stopPropagation();とは クリックイベントのパブリング（特定のイベントが親要素に伝播する現状）のを防ぐために使用されます。 つまり、特定のイベントを特定の要素のみに割り当てたい時に使用します。 イベントパブリングとは JavaScriptのDOMツリー内で発生したイベントが、発生した要素から親要素に向かって順番に伝播していく現象です。 仮に子要素のボタンをクリックした場合、クリックイベントは下記の順番で発生します。