Javascript event.target.matches（）与子项有问题

好的，我正在为我的社交媒体网站做一个下拉列表，我想添加一个滑动按钮：

$fnNAV$lnNAV
@$userNAV

问题是：除非它只是#下拉div，而不是任何子项，否则当您单击它时，下拉列表将关闭

我有以下JS代码在单击下拉列表内容以外的任何内容时关闭下拉列表：

window.onclick = function(event) {
    if (!event.target.matches('#dropdown') && !event.target.matches('#navPFP')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

window.onclick=函数（事件）{
如果（！event.target.matches（'#下拉列表'）&&！event.target.matches（'#navPFP'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

即使我添加了一个

&&&！event.target.matches（'.switch'）

（或任何其他

div

id）到

if

语句，单击滑块时下拉列表仍将关闭。如何修复此问题以使下拉列表保持打开状态？

请使用以下选项，而不是

匹配（）

element.closest（“#dropdown”）
从
element
开始，向上遍历DOM，查找
#dropdown
。如果
closest（）
找到
#dropdown
，它将返回它，并且
元素
必须是
#dropdown
的子元素。如果不是，它将返回
null
，并且
元素必须在
#下拉列表
之外最近，我对event.target.matches（）也有同样的问题。

除了使用event.target.closest（）之外，还可以将设置为none


document.querySelector（“容器”）.addEventListener（“单击”，“事件）=>{
if（event.target.matches（“.click here”））{
log（“您在“单击此处”分区内单击了”）；
const result=document.querySelector（“结果”）；
result.innerText=“您在“单击此处”div.内部单击了”；
}
})
。无需单击{
指针事件：无；
}

第一组
嵌套
正文

滑块和菜单可能由多个元素组成。您是否尝试
console.log（event.target）
查看哪些元素实际触发了事件？
window.onclick = function(event) {
    if (!event.target.matches('#dropdown') && !event.target.matches('#navPFP')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

if (!event.target.closest('#dropdown')) {
  // target is neither #dropdown or one of its descendants; close the dropdown
}