1. ホーム
  2. angular

[解決済み] Angular2 クリックされた要素のIDを取得する

2023-02-23 07:42:28

質問

このようなクリックイベントがあります。

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

関数 input パラメータでイベントをキャッチし、どのボタンがクリックされたかを調べたいのです。

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 ?

UPDATEです。 プランカーはすべて良好 が、私の場合はローカルで持っています。

event.srcElement.attributes.id - 未定義 event.currentTarget.id - は値を持ちます。

私はクローム最新版 49.0.2623.87 m を使用しています。

もしかして Material Design 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 .

この質問を参照してください。