代码之家 › 专栏 › 技术社区 › Vingtoft

角度材质|按下按钮文本时,材质按钮的行为不同

angular-material typescript angular

Vingtoft · 技术社区 · 7 年前

考虑下面的代码:

<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)和按钮事件。

按钮上的文本 span 有课 mat-button-wrapper

问题: 如果按下按钮文本,我希望获得按钮事件目标(而不是范围事件目标),我如何实现这一点?

2 回复 | 直到 7 年前

Alex K 7 年前

单击事件运行正常。在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>

G. Tranter 7 年前

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

<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);
  }
}

推荐文章

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

Bitan Basak · 使垫子自动完成功能类似于Bootstrap选择

1 年前