检查用户是否已在组件中的特定div内单击

Question

我的应用程序中有一个全局点击事件。

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

每次用户点击时，我的handleClick函数都会执行。我想检查用户是否已点击特定div。我试过以下内容：

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

但这不起作用。我还试图通过使用ElementRef来获取特定的div，但我只是设法获得了我的div的原生元素。有什么建议吗？

Answer 1

首先，getElementsByClassName返回一个HtmlCollection，因此您可能希望使用index来访问单个项目：

request

或者更好地使用querySelector方法：

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

但是，如果你的div有内部HTML，你可能需要检查点击的目标是否是div的子项：

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

Answer 2

将单击处理程序添加到要侦听的特定div，然后添加

event.stopPropogation();

这样可以防止文档点击处理程序被触发。