如何在父div上捕獲事件？

Question

我想問一下：

• 如何使組顯示在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>