目录

场景再现

问题解决

---

场景再现

• event.target：当前被点击的对象
• 下面的代码块是，一个带了个下拉按钮（div.icon）的筛选框（div.selected）

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

• 问题来了
• 现在我需要给外层的 div.box 添加点击监听事件，从而给弹出的下拉列表进行定位
• 此时获取的 $event.target 却不是 div.box，而是 div.selected 或者 div.icon
• 就是说，点击事件获取的是子节点，如下图：
• 
• 获取不到正确的节点，会导致 popover 无法计算出实际点击位置

问题解决

• 给 子节点 设置css point-events: none，让子节点无法成为事件的 target

.selected, 
.icon {
   // 防止子节点成为 target
   pointer-events: none; 
}

•