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

Question

比如有如下三级结构

 <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？

Answer 1

在正常文档流中，如果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了。

Answer 2

box.addEventListener("click", clk, true);

试试把第三个参数改成 true

https://developer.mozilla.org...

Answer 3

建议了解一下事件模型,这样你才能清楚的了解到整个事件触发的过程,也才能针对这些过程去做一些事情;
默认情况下addEventListener是冒泡的,所以不管你在a还是box绑定,e.target作为触发的元素都会是b,
想要针对a进行处理,就得在a上绑定处理的函数,a.addEventListener ,这样从b冒泡到a的时候就会触发

Answer 4

不知道你的样式单是怎么写的，就是那三个class，最大的可能是，由于外层的div包含了内层的div，你所有的点击动作都是作用在最内层的div上。所有，event.target始终指向b

参考：
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
http://www.cnblogs.com/wkylin...

Answer 5

你的b遮住了a，b在顶部压着a，你可以在a 和b 里都包一些字母，然后让鼠标点击a。
（你给，a和b添加背景色，就知道谁压着谁了。）

Answer 6

把事件绑定到a上,然后在捕获阶段触发,能不能解决?