Menu
I define an event in same level div, but i can't trigger the event with div between multi different div overlap area, just one of them triggered, how to trigger these same level div events by overlap area? the example code like this
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: it's use for slove the li sort question,when li A over another li B,the mouseover event in B can't trigger,just trigger A,so i need a solution for slove multi same level div event triggered in overlap area,pointer-events：none it's not helpful,i need trigger multi event in overlap area not one)
954
asked Oct 26 '25 06:10
If I understood correctly you want to detect click event for your three divs, even when they overlap each other. Since your tags are defined at the same level, you cannot use event bubbling or capturing to handle click at different levels like we do with nested tags.
When user clicks, try calling function document.elementsFromPoint(x, y) to get all elements underneath the mouse pointer.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
