Ion-popover行为差异咨询：同函数下两按钮为何表现不同？

按钮核心差异 #

两个按钮的代码差异仅在于emitClick属性的设置：

• "Click me"按钮：

  <ion-button (click)="presentPopover($event)">Click me</ion-button>
  

  未显式设置emitClick，使用默认值true，会触发原生DOM点击事件。
• 感叹号按钮：

  <ion-button [emitClick]="false" (click)="presentPopover($event)">!</ion-button>
  

  设置[emitClick]="false"，禁用了按钮的原生点击事件派发。

Popover定位差异的原因 #

Ionic的ion-popover创建时，依赖传入的event参数（原生鼠标/触摸事件）获取触发元素的位置信息，以此计算锚点，实现相对触发元素的定位（默认显示在元素下方）。

当按钮启用emitClick="false"时：

• ion-button仅触发组件内部的点击回调，不会派发原生的MouseEvent
• 此时传递给presentPopover的$event并非原生事件，缺少Popover定位所需的目标元素坐标、DOM节点等关键信息
• Popover无法找到有效的锚点，就会触发默认逻辑，在屏幕中央显示

内容的提问来源于stack exchange，提问作者darkoz