Question

我有这样的点击事件

 <button (click)="toggle($event)" class="someclass" id="btn1"></button>
 <button (click)="toggle($event)" class="someclass" id="btn2"></button>

我正在我的函数输入参数中捕获该事件，并希望找出单击按钮的确切内容。

toggle(event) {

}

但event没有id属性。

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 1198
clientY: 29
ctrlKey: false
currentTarget: button#hdrbtn_notificaton.mdl-button.mdl-js-button.mdl-js-ripple-effect.mdl-button--icon
defaultPrevented: false
detail: 1
eventPhase: 3
fromElement: null
isTrusted: true
isTrusted: true
layerX: -566
layerY: 5
metaKey: false
movementX: 0
movementY: 0
offsetX: 22
offsetY: 13
pageX: 1198
pageY: 29
path: Array[13]
relatedTarget: null
returnValue: true
screenX: 1797
screenY: 148
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: span.mdl-button__ripple-container
target: span.mdl-button__ripple-container
timeStamp: 1458032708743
toElement: span.mdl-button__ripple-container
type: "click"
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 1198
y: 29

如何找到id？

更新： 掠夺者都很好但在我的情况下我在本地：

event.srcElement.attributes.id - 未定义 event.currentTarget.id - 具有值

我正在使用chrome最新版本49.0.2623.87 m

可能是Material Design Lite的事吗？因为我正在使用它。

Answer 1

如果您想要访问该按钮的id属性，可以利用该事件的srcElement属性：

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick($event)" id="test">Click</button>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
  }
}

请参阅此plunkr：https://plnkr.co/edit/QGdou4?p=preview。

看到这个问题：

How can I make event.srcElement work in Firefox and what does it mean?

Answer 2

对于TypeScript用户：

update employee e set idnr = a.value::text::int8
from
jsonb_each('{"id1": 123, "id2": 234, "id3": 567}'::jsonb) a
where a.key = e.id

Answer 3

你可以传递一个静态值（或来自mocha_istanbul: { coverage: { // where your tests leave src: 'server/tests', options: { // instrument only spec files mask: '*.spec.js', // output a human readable website // (along site regular test summary produced by mocha) reportFormats: ['html'] } } }或其他的变量）

*ngFor

Answer 4

终于找到了最简单的方法：

<button (click)="toggle($event)" class="someclass" id="btn1"></button>
<button (click)="toggle($event)" class="someclass" id="btn2"></button>

toggle(event) {
   console.log(event.target.id); 
}

Answer 5

当HTMLElement没有id，name或class来致电

时

然后使用

<input type="text" (click)="selectedInput($event)">

selectedInput(event: MouseEvent) {
   log(event.srcElement) // HTMLElement
}

Answer 6

如果要访问角度6中的按钮的id属性，请遵循以下代码

`@Component({
  selector: 'my-app',
  template: `
    <button (click)="clicked($event)" id="myId">Click Me</button>
  `
})
export class AppComponent {
  clicked(event) {
    const target = event.target || event.srcElement || event.currentTarget;
    const idAttr = target.attributes.id;
    const value = idAttr.nodeValue;
  }
}`

您的id值，

value的值为myId。

Answer 7

没有必要传递整个事件（除非您需要的活动与您声明的其他方面不同）。实际上，不建议这样做。您只需稍作修改即可传递元素引用。

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button #btn1 (click)="toggle(btn1)" class="someclass" id="btn1">Button 1</button>
    <button #btn2 (click)="toggle(btn2)" class="someclass" id="btn2">Button 2</button>
  `
})
export class AppComponent {
  buttonValue: string;

  toggle(button) {
    this.buttonValue = button.id;
  }

}

StackBlitz demo

从技术上讲，您不需要查找被单击的按钮，因为您已经传递了实际的元素。

Angular guidance

Answer 8

您可以使用从其父级HTMLButtonElement继承的界面 HTMLElement！

通过这种方式，您将能够自动完成 ...

<button (click)="toggle($event)" class="someclass otherClass" id="btn1"></button>

toggle(event: MouseEvent) {
    const button = event.target as HTMLButtonElement;
    console.log(button.id);
    console.log(button.className);
 }

To see all list of HTMLElement from the World Wide Web Consortium (W3C) documentation

StackBlitz demo

Answer 9

这样做很简单:(正如评论中所述的是带有两种方法的例子）

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app', 
    template: `
      <button (click)="checkEvent($event,'a')" id="abc" class="def">Display Toastr</button>
      <button (click)="checkEvent($event,'b')" id="abc1" class="def1">Display Toastr1</button>
    `
})
export class AppComponent {
  checkEvent(event, id){
    console.log(event, id, event.srcElement.attributes.id);
  }
}

演示：http://plnkr.co/edit/5kJaj9D13srJxmod213r?p=preview

Answer 10

对于嵌套的 html，使用 closest

<button (click)="toggle($event)" class="someclass" id="btn1">
    <i class="fa fa-user"></i>
</button>

toggle(event) {
   (event.target.closest('button') as Element).id; 
}

Answer 11

您可以通过名称检索属性的值，使您能够获取自定义属性的值，例如来自指令的属性：

<button (click)="toggle($event)" id="btn1" myCustomAttribute="somevalue"></button>


toggle( event: Event ) {
  const eventTarget: Element = event.target as Element;
  const elementId: string = eventTarget.id;
  const attribVal: string = eventTarget.attributes['myCustomAttribute'].nodeValue;
}

Angular2获得点击的元素ID

11 个答案: