微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular2获取点击的元素ID

我有这样的点击事件
<button (click)="toggle($event)" class="someclass" id="btn1"></button>
 <button (click)="toggle($event)" class="someclass" id="btn2"></button>

我正在捕获我的函数输入参数中的事件,并想要确定按下什么按钮被点击。

toggle(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

可能是材料设计Lite的东西吗?因为我在使用它

如果你想访问按钮的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?

原文地址:https://www.jb51.cc/angularjs/144088.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐