javascript - js 事件委托只能委托到直接父级上吗？

问题描述

问 题

比如有如下三级结构

 <div class='box'>
     <div class='a'>
         <div class='b'>
     
         </div>
     </div>
 </div>
 
 <script>
 var box=document.querySelector(.box);
 
 box.addEventListener("click",clk);
 
 function clk(e){
     //想获得a结构
     var isA=e.target.class.contains("a");
     console.log(e.target)//实际总是b
 }
 </script>

实际上输出的目标总是b，这是为什么？有什么办法获取a？

解决方案

在正常文档流中，如果A和B是重合的（A的宽高是B撑开的；或者A指定了宽高，B的宽高设置了100%）
那么你点击的时候获取到的e.target会是B。

这个跟浏览器DOM结构相关。

要获取到A：

1.可以给A绑定事件监听，然后用e.currentTarget去获取A

2.给B的css添加pointer-events:none;屏蔽B的鼠标事件，然后e.target就会是A了。

这篇关于javascript - js 事件委托只能委托到直接父级上吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！