コンポーネント内の特定のdivをユーザーがクリックしたかどうかを確認します。

Question

アプリケーションでグローバルなクリックイベントが発生しました。

host: { 
     '(document:click)': 'handleClick($event)', 
    }, 

ユーザがクリックするたびに、私のhandleClick機能が実行されます。ユーザーが特定のdivをクリックしたかどうか確認したい私は次のように試しました：

handleClick(event){ 
    console.log(event.target===document.getElementsByClassName("drop_down_wrapper") 
} 

しかし、これは動作しません。私はElementRefを使って特定のdivを保持しようとしましたが、divのnative要素を保持することしかできませんでした。助言がありますか？

Answer 1

まず、内側のHTMLを持っていると、クリックしたターゲットがdivの子であるかどうかをチェックする必要があります：

var target = e.target; 
var wrapper = document.querySelector(".drop_down_wrapper"); 

while (target != wrapper && target !== document) { 
    target = target.parentNode; 
} 

Answer 2

これは発射からドキュメントのクリックハンドラを防ぐ必要がありますあなたが聴きたい特定のdivにクリックハンドラを追加し、

event.stopPropogation(); 

を追加します。

handleClick(event) { 
    console.log(event.target === document.getElementsByClassName("drop_down_wrapper")[0] 
} 

それとも、より良い利用querySelector方法：あなたのdivの場合、

handleClick(event) { 
    console.log(event.target === document.querySelector(".drop_down_wrapper") 
} 

しかしあなたは、個々の項目にアクセスするためにインデックスを使用する場合がありますので、HtmlCollectionを返すgetElementsByClassNameすべての