重叠固定定位元素的滚动条干扰鼠标悬浮事件问题咨询

我维护着一个支持向右展开子菜单的自定义下拉菜单，当选项列表过长时会显示滚动条。父菜单和子菜单都采用fixed定位，这应该是问题的核心根源。

核心问题表现 #

滚动条始终处于鼠标事件的顶层，对mouseover、mouseout、mouseenter、mouseleave事件造成干扰：

• 鼠标移向右侧子菜单选项时，只要经过父菜单的滚动条，哪怕子菜单在滚动条上方，父菜单的mouseleave事件仍会触发；
• 鼠标离开滚动条（但仍停留在子菜单选项上）时，子菜单的mouseenter和mouseover事件才会触发。

代码示例 #

JavaScript #

const output = document.getElementById('output');
const fixedContainer = document.getElementById('fixed-container');

fixedContainer.onmouseenter = () => output.innerHTML = 'Entered parent<br />' + output.innerHTML;
fixedContainer.onmouseleave = () => output.innerHTML = 'Left parent<br />' + output.innerHTML;

const fixedChild = document.getElementById('fixed-child');

fixedChild.onmouseenter = () => output.innerHTML = 'Entered child<br />' + output.innerHTML;
fixedChild.onmouseleave = () => output.innerHTML = 'Left child<br />' + output.innerHTML;

CSS #

div {
  border: thick solid black;
  background-color: white;
}

#fixed-container {
  position: fixed;
  top: 1vh;
  left: 1vw;
  width: 50vw;
  height: 50vh;
  overflow-y: scroll;
}

#fixed-child {
  position: fixed;
  width: 25vw;
  height: 25vh;
  left: 40vw;
  top: 25vh;
}

#output {
  margin-top: 54vh;
  border: thin solid black;
  overflow-y: scroll;
  height: 20vh;
}

HTML #

<div id="fixed-container">
  <div id="fixed-child">

  </div>
</div>
<div id="output">

</div>

额外异常细节 #

更奇怪的是，在父菜单mouseleave事件中调用document.elementsFromPoint()，结果里能显示子菜单及其选项，说明浏览器明明知道鼠标仍悬浮在子菜单上，但还是触发了mouseleave事件。

此外，滚动条还会阻止点击子菜单选项——哪怕鼠标在子菜单元素上方，点击拖动仍会触发父菜单的滚动操作。

我可以通过将菜单改为absolute定位来修复问题，但认为浏览器应该能识别固定定位元素在滚动条上方的情况，这是已知的浏览器Bug吗？

内容的提问来源于stack exchange，提问作者Daniel Arant