Angular Material |按下按钮文本时， Material 按钮的行为有所不同

考虑以下代码:

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函数。系统将记录“test”(id)和按钮事件。

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

问题:如果按下按钮文本，我想获取按钮事件目标(而不是跨度事件目标)，我该如何实现这一目标？

最佳答案

点击事件行为正常。在 JavaScript 中，当在源元素上触发事件时，它会从源“冒泡”并通过祖先元素树向上传播。

所以当你有这样的 DOM 结构时:

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

当 span 上的单击事件向上冒泡到文档根目录时，该事件将向上传播到 button。

如果你想获取按钮元素，你可以使用 Template Reference Variable并将其传递到您的事件处理程序中:

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

关于 Angular Material |按下按钮文本时， Material 按钮的行为有所不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53596771/