角2/4のHostListenerは右のイベントでクリックしませんか？

Question

私は@HostListenerだけimgグラブではなく、バブルアップを行い<a>タグに画像を追加するとき、私は、しかしリンク

を取得するために<a>要素にアタッチディレクティブmyPopUpを持っています。

イメージが内部にあるときにタグリファレンスを取得するにはどうすればよいですか？

は、ここに私のplunkr https://plnkr.co/edit/80OGOKLSW3HjJfXjP7O2?p=preview（ビューコンソール）

とコードです：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <a href="http://google.com" myPopUp> 
    <img src="http://via.placeholder.com/350x150"/> 
    </a> 
    <br/> 
    <a href="http://google.com" myPopUp> 
    This works fine, event is A tag 
    </a> 
    `, 
}) 
export class App { 

    @Directive({ selector: '[myPopUp]' }) 

    @HostListener('click', ['$event']) 
    onClick(event: MouseEvent) { 
     console.log(event.target); 
    } 

} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Answer 1

あなたが観察している行動はtargetは、あなたがクリックした要素を指しているという事実から来ています。最初の例では、<a>タグ内に何もないので、クリックするとクリックを登録する要素になり、<a>への参照が取得されます。 2番目の例では、クリックは実際に<img>に登録されています。そのため、targetで参照されています。

あなたはディレクティブmyPopUpに@HostListenerを置く場合、あなたはcurrentTargetを使用して<a>要素に達する可能性：

@Directive({ selector: '[myPopUp]' }) 
class myPopUp { 
    @HostListener('click', ['$event']) 
    onClick(event: MouseEvent) { 
     console.log(event.currentTarget); 
    } 
} 

しかし、あなたがルート要素に@HostListenerを持つようにしたい場合は、あなたの唯一の解決策は、ノードトラバーサルおよびリファレンスを使用することですparentNode：

@HostListener('click', ['$event']) 
    onClick(event: MouseEvent) { 
     console.log(event.target.parentNode); 
    } 

それが<img>は常にの直接の子であることを前提としてい要素。