今回、子孫要素をクリックした場合にも親要素の方でイベントを発生させたいので、
JavaScript
1document.addEventListener("click",function(e){ 2 if (e.target.className == "クラス名") { 3 //処理 4 } 5});
という風にはできません。
また、今回はそのクラスを持っている要素が減ったり増えたりするので、for文でやることもできません。
最終的にはjQueryを使うか、子孫要素からたどっていくしかないと思うのですが、jQueryはなるべく使いたくないので、JavaScriptで完結するとありがたいです。
よろしくお願いします。
追記
サンプルを作ってみました
HTML
1<div id="elList"> 2 <div class="parent"> 3 <div class="child1"> 4 <div class="child2"> 5 </div> 6 </div> 7 </div> 8</div> 9<button id="append">追加</button>
JavaScript
1var elList = document.getElementById("elList"); 2var append = document.getElementById("append"); 3 4append.addEventListener("click", function() { 5 elList.innerHTML += ` 6 <div class="parent"> 7 <div class="child1"> 8 <div class="child2"> 9 </div> 10 </div> 11 </div>`; 12});
CSS
1.parent { 2 width: 60px; 3 height: 60px; 4 margin: 10px; 5 background: #f00; 6} 7 8.child1 { 9 width: 40px; 10 height: 40px; 11 background: #0f0; 12} 13 14.child2 { 15 width: 20px; 16 height: 20px; 17 background: #00f 18}
これで、parentやparentの子孫要素をクリックした時にイベントを発生させたいのですが、
for文でやろうとしても増えたりするのでできません。
addEventListenerのevent.targetで子孫要素まで判定するとできなくはないですが大変です。
なので、jQueryみたいにできる方法はないのでしょうか。
回答2件
あなたの回答
tips
プレビュー