如何捕捉父div上的事件？

Question

我想問：

• 如何使組顯示OVER的div a和b？
• 即使用戶點擊div a或b，我也希望捕獲組中的事件mousedown。

基本上這個小組應該在視覺上覆蓋了另外兩個div，所以當我點擊裏面的組時，只有組div才能檢測到mousedown。

說明：我無法更改HTML結構。

document.getElementById('group').addEventListener('click', function(event) { 
 
    event.stopPropagation(); 
 
    alert('click on: ' + event.target.id); 
 
});

#group { 
 
    position: absolute; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: yellow; 
 
    z-index: 2; 
 
    opacity: 0.5; 
 
} 
 

 
#a { 
 
    position: absolute; 
 
    left: 80px; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background-color: blue; 
 
    z-index: 0; 
 
} 
 

 
#b { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background-color: blue; 
 
    z-index: 0; 
 
}

<div id="group"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
</div>

Answer 1

1. 爲孩子使用透明度0。

2. 使用event.currentTarget而不是event.target。

有了這個配置的孩子確實比groups，但不可見的，事件是由groups ELEM，不是孩子抓到。

document.getElementById('group').addEventListener('click', function(event) { 
 
    event.stopPropagation(); 
 
    alert('click on: ' + event.currentTarget.id); 
 
});

#group { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: yellow; 
 
    z-index: 2; 
 
    opacity: 0.5; 
 
} 
 

 
#a { 
 
    position: relative; 
 
    left: 80px; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background-color: blue; 
 
    z-index: 0; 
 
    opacity: 0 
 
} 
 

 
#b { 
 
    position: relative; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background-color: blue; 
 
    z-index: 0; 
 
    opacity: 0; 
 
}

<div id="group"> 
 
    <div id="a">A</div> 
 
    <div id="b">B</div> 
 
</div>