给父元素添加点击事件时，获取到的 event.target 为子元素（point-events: none 的妙用）

目录

场景

分析

解决

---

场景

使用 ion-select 组件时，点击下拉图标

点击事件的 event.target，不是图标本身的 DOM，而是图标子元素的 DOM

这会导致 popover 无法计算出实际点击位置

分析

将上面的场景进行抽象处理：

给外层的 div.box 添加点击监听事件时，获取的 $event.target（当前被点击的对象） 不是 div.box，而是 div.selected 或者 div.icon

<div class="box" (click)="presentPopover($event)">
    <div class="selected"></div>
    <div class="icon"></div>
</div>

解决

给子节点设置样式 point-events: none

让子节点发生事件穿透，避免成为事件的 target

.selected, 
.icon {
   pointer-events: none; 
}