【動くサンプルあり】単純なonclickイベントのはずなのですが、イベントが発火しません。

Question

やりたいことはインスタの画像をEmbed codeを使って、contenteditableのdivで作ったエディタ内に挿入し、その挿入した画像にたいしてonclickでイベントを発火させるということです。

ただ、なぜか普通にコードを書いてもイベントがうまく発火してくれません。
今回してしているdivの範囲をわかりやすくするために、CSSでhoverを使ってマウスが乗ったら多少色を変えています。

サンプルで詳細なコードとその実行結果を確認できます。
（右上のCSSのブロックにインスタのEmbed codeをコメントアウトして貼っています）

どなたか原因がわかる方、教えていただけると嬉しいです。

Answer 1

document.addEventListener('click',function(e){})
でイベントを追加してください
targetを絞り込むのはe.targeのnodeNameやidをみればよいでしょう

Comments

[退会済みユーザー]

ご回答ありがとうございます。
ご連絡が遅くなってしまい、また不慣れなものを使ったために、サンプルが無関係なものになってしまっていて申し訳ございません。

サンプルを正しいものに修正しました。
こちらのサンプルの中では回答でいただいたように、document.addEventListener('click',function(e){}) でイベントを追加しているのですが、うまくいかなくこちらでご質問させていただきました。。

何か誤りなどわかりますでしょうか？

Answer 2

Windows Firefox/Chrome 双方で 「100」がコンソールに現れました。（inputに文字列を入れてボタンをクリックし、現れた要素をクリック）

とりあえず質問とは関係ありませんが、同じidが生成されるようになっているのでそこは注意されたほうがいいと思います。

Comments

[退会済みユーザー]

event.targetがイベントの発生源となった最深の要素を取ってくるということを知らず、インスタなどの埋め込みだとうまくいかなかったようでした。
そのため、ただテキストを入力した場合はkei334さんのようにコンソールで確認できたようです。

ご回答いただきありがとうございました。

Answer 3

https://teratail.com/questions/50655
こちらの方と全く同じ勘違いをしている気がします。

Re: Hiro14 さん

Comments

[退会済みユーザー]

ありがとうございます！！
event.targetがイベントの発生源となった最深の要素を取ってくるということを知利ませんでした。
無事解決できました。