【JavaScript】addEventListener　の内容が親要素のみならず子要素まで追加されてしまう

前提・実現したいこと

親要素(id = red)だけにaddEventListenerの内容を反映させたい。

###現状
親要素(id = red)だけではなく、
子要素(id = childNode2)に対してもaddEventListenerの内容が反映されてしまう。

ネットで調べたところ、イベントキャプチャリング関係が怪しいのかとは思っているのですが、
特に解決策が分からず難航しております。

https://itstudio.co/2013/07/16/1475/
上記の様な記事はいくつか読みましたが、前提が違う為参考にはなりませんでした。
(記事の内容は親と子の要素、どちらにもonClickがある前提)

もしも分かる方がいましたら、教えて頂けると幸いです。

該当のソースコード

html
1<div id = 'red' class = 'red'>
2　親ノード
3  <p id ='childNode2'>子ノード</p>
4</div>

JavaScript
1/*クリックイベント追加*/
2  red = document.getElementById('red');
3  set_event_onclick(red);
4
5
6　function set_event_onclick(targertClass){
7  　targertClass.addEventListener("click", testClick);
8　}
9
10/*クリック時の挙動*/
11　function testClick(e){
12  　console.log('クリックされたよ');
13  　console.log(e); //何がクリックされたか
14　}
15

試したこと

・addEventListenerの第3引数をtrueにする
→キャプチャリングフェーズにすれば、親要素でたどり着いた時点でaddEventListenerが止まるかと思ったがダメ

補足情報（FW/ツールのバージョンなど）

firefox 84.0.2(最新版)

行動規範の内容に同意します

回答3件

ベストアンサー

子要素のクリックで処理したくないということでしたら、e.target をチェックして除外します。

javascript
1　function testClick(e) {
2    if (e.target != e.currentTarget)
3      return;
4  　console.log('クリックされたよ');
5    ...

stopPropagation() を使うには子要素にもイベントハンドラを登録しないといけないので、このケースでは嬉しくないですね。

投稿2021/01/14 14:44

int32_t

総合スコア21679

k.hiraga

2021/01/15 01:30

ご回答、ありがとうございます。 addEventListenerが子要素にも勝手に追加されてしまうのは仕方ない事なのですね。 (そのため、if文で処理を分岐させる必要がある) ありがとうございます

int32_t

2021/01/15 01:41

イベントリスナーが子要素にも登録されているわけではなくて、子要素で起きたイベントが親要素にバブリングしています。とくにクリックに関しては、子要素は親要素の中にあり、子要素をクリックすると親要素の中でクリックが起きているわけで、バブリングするのは妥当な挙動だと思います。

k.hiraga

2021/01/15 06:48

ありがとうございます。 addEventListenerが子要素に登録されていると勘違いをしていました。　→ブラウザの開発者ツールでもクリックイベントは登録されていない理由が分かりました確かに、子要素 = 親要素の一部　なので子要素がクリックされた際に親要素のクリックイベントがバブリングによって実行されるのは当然ですね.. とても悩んでいたので、助かります!! ありがとうございます!!

行動規範の内容に同意します