Javascript 选择主div忽略子div

我希望在选择两个容器的外部div时，我的警报函数应该在不使用任何id或类名的情况下工作

基本上我需要的是，如果我有4个主要的div没有孩子。我应该能够添加一些事件到所有最外层的div，不管它有多少个子div。这可能吗

var x=document.getElementsByTagName（'DIV'）[0]； x、 addEventListener（'click'，函数（e）{ 如果（e.target==此）{ 警报（“最外层分区”）； } })

.container{
高度：200px；
宽度：60%；
背景：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.第一组{
填充：15px；
背景：白色；
高度：100px；
宽度：70%；
}
.第一组儿童{
填充：15px；
背景：红色；
}
.first div child>p{
颜色：白色；
}

这是第



这是第

解决方案是通过使用事件监听器的类名选择它们，将事件监听器添加到外部div中。这将能够解决您当前的问题

        <script>
        var x = document.getElementsByClassName('container');
        x.addEventListener('click',function(e) {
            if(e.target == this) {
                alert('Outermost Div');
            }
        })


    </script>

var x=document.getElementsByClassName（'container'）；
x、 addEventListener（'click'，函数（e）{
如果（e.target==此）{
警报（“最外层分区”）；
}
})

---

：）

按类名而不是标记名选择

div

s。这将返回一个

[HTML集合]

，其中包含所有外部

div

，您可以将其转换为真实数组，并使用

forEach

方法设置事件侦听器。您可以将

事件.currentTarget

与

事件.target

进行比较，如果两者相等，则发出警报。请参阅下面的代码片段：

var x=document.getElementsByClassName（'container'）；
[…x].forEach（node=>node.addEventListener（'click'，（e）=>{
if（e.currentTarget===e.target）console.log（'outerMostDiv'）；
}));
.container{
高度：200px；
宽度：60%；
背景：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.第一组{
填充：15px；
背景：白色；
高度：100px；
宽度：70%；
}
.第一组儿童{
填充：15px；
背景：红色；
}
.first div child>p{
颜色：白色；
}

这是第



这是第

类名容器用于测试目的。我希望逻辑是通用的。如果我在任何一个实时网站上运行这个逻辑，那么所有的主div都应该被获取，而不管其结构如何