如何在父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>