Question

考虑以下代码：

HTML：

<button mat-flat-button id="test" (click)="toggle($event)">Click me!</button>

组件：

toggle(event) {
  let id: string = (event.target as Element).id;
  console.log(id)
  console.log(event.target)
}

按下按钮将触发toggle函数，并将event作为参数。系统将记录"test"（id）和一个按钮事件。

按下按钮上的文本将记录一个未定义的ID和一个span类的mat-button-wrapper

问题：如果按下了按钮文本，我想获得按钮事件目标（而不是跨度事件目标），我该如何实现？

Answer 1

click事件行为正确。在JavaScript中，当在源元素上触发事件时，事件会从源“冒泡”并在祖先元素树中向上传播。

因此，当您具有这样的DOM结构时：

<button mat-flat-button>
    <span>Click me!</span>
</button>

在span上的单击事件将在到达文档根目录之前传播到button。

如果要保留button元素，可以使用Template Reference Variable并将其传递到事件处理程序中：

<button mat-flat-button id="test" #testButton (click)="toggle(testButton)">Click me!</button>

Answer 2

您可以通过将模板引用变量分配给按钮来直接将button元素传递到事件处理程序中：

<button mat-flat-button id="test" #button (toggle)="toggle(button._elementRef.nativeElement)">Click me!</button>

toggle(button) {
  console.log(button.id);
}

您还可以使用事件目标，当事件目标不是按钮时，请查看其父对象（或父对象的父对象，具体取决于您在按钮内的内容）：

toggle(event) {
  if (event.target instanceof HTMLButtonElement) {
    console.log(event.target.id);
  } else {
    console.log(event.target.parentElement.id);
  }
}

角材料当按下按钮文本时，“材质按钮”的行为有所不同

2 个答案: