我在同一级别的div中定义了一个事件，但是我无法在多个不同的div重叠区域之间触发带有div的事件，只是触发了其中一个，如何通过重叠区域触发这些同级别的div事件？
像这样的示例代码
function Triggered(e){
console.log(event.target.id);//
} .S{
position: absolute;
width: 99px;
height: 99px;
opacity: .7;
}<body>
<div id="1" style="background-color:blue;left: 50%;top:50%" onclick="Triggered()" class="S"></div>
<div id="2" style="background-color:red;left: 50%;top:50%;transform: translate(-25%,-50%);" onclick="Triggered()" class="S"></div>
<div id="3" style="background-color:green;left: 50%;top:50%;transform: translate(-50px,0);" onclick="Triggered()" class="S"></div>
</body>(ps:用于slove li排序问题，当li A越过另一个li B时，B中的mouseover事件无法触发，只触发A，所以我需要一个slove多同级div事件在重叠区域触发的解决方案,pointer-events:无无用，我需要在重叠区域触发多个事件不是一个)
最佳答案
如果我理解正确，您想检测三个 div 的点击事件，即使它们相互重叠。由于您的标签是在同一级别定义的，因此您不能像使用嵌套标签那样使用事件冒泡或捕获来处理不同级别的点击。
当用户点击时，尝试调用函数document.elementsFromPoint(x, y)获取鼠标指针下方的所有元素。
function Triggered(e) {
var clickedElements = [];
document.elementsFromPoint(event.clientX, event.clientY).forEach(function(element) {
if (element.classList.contains('S')) {
clickedElements.push(element.id);
}
});
console.log(clickedElements);
}.S {
position: absolute;
width: 99px;
height: 99px;
opacity: .7;
}<div onclick="Triggered()">
<div id="blue" style="background-color:blue;left: 50%;top:15%" class="S"></div>
<div id="red" style="background-color:red;left: 50%;top:15%;transform: translate(-25%,-50%);" class="S"></div>
<div id="green" style="background-color:green;left: 50%;top:15%;transform: translate(-50px,0);" class="S"></div>
</div>关于javascript - 如何在同级多div重叠区域触发多事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66882840/