檢查用戶是否在組件中的特定div內單擊了

我的應用程序中有全局的單擊事件。檢查用戶是否在組件中的特定div內單擊了

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

每次用戶點擊，我的handleClick函數都會執行。我想檢查用戶是否點擊了特定的div。我試着用以下方法：

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

但是這不起作用。我也試圖通過使用ElementRef獲得特定的div，但我只設法弄到我的div的本地元素。有什麼建議麼？

來源

2016-04-25 Jakob Svenningsson

首先，getElementsByClassName返回的HTMLCollection，所以你可能需要使用索引來訪問單個項目：

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

或者更好地利用querySelector方法：

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

但是，如果你的DIV有內在的HTML，你可能需要檢查點擊的目標是否是div的孩子：

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

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

來源

2016-04-25 18:52:46 dfsq

謝謝你的回答。像魅力一樣工作！ –

添加單擊處理程序要收聽特定的div，並添加

event.stopPropogation();

這應該防止您的文檔單擊處理燒製而成。

來源

2016-04-25 18:51:14 DerekMT12

感謝您的回答！這個解決方案也很好！ –

檢查用戶是否在組件中的特定div內單擊了

回答

相關問題