聆听堆叠元素上的事件

Question

如果我有三个div叠在一起，我想在mousemove上听到最底层的div，那么当我实际上只在最底部时，我才会得到那个事件元件。如果另一个元素部分位于元素之上，那么在我将鼠标移动到另一个元素（仅覆盖我的元素之后）之后，我不会听到该元素被抛出的事件。仍然在原始元素上，但现在也在新元素上）。

我创造了一个显示我的困境的小人物：https://jsfiddle.net/maffelu/o5pmxrgz/2/

HTML：

<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>

CSS（将div稍微叠加在一起）：

div {
  width: 200px;
  height: 200px;
  position: absolute;
  border: 1px #000 solid;
}

#one {
  top: 20px;
  left: 20px;
  background: red;
}

#two {
  top: 50px;
  left: 50px;
  background: green;
}

#three {
  top: 80px;
  left: 80px;
  background: blue;
}

使用Javascript：

document.getElementById('one').addEventListener('mouseover', function(e) {
    console.log('one');
});

document.getElementById('two').addEventListener('mouseover', function(e){
console.log('two');
});

document.getElementById('three').addEventListener('mouseover', function(e){
console.log('three');
});

我想分别听所有三个div的mousemove，即使你技术上将鼠标移动到刚被覆盖的元素上，有没有办法继续听？

Answer 1

我找到了解决问题的方法。我听取所有元素的包含元素，并计算每当我这样的div（小提琴https://jsfiddle.net/maffelu/o5pmxrgz/4/）时：

HTML：

<div id="container">
  <div id="one">
  </div>
  <div id="two">
  </div>
  <div id="three">
  </div>
</div>

使用Javascript：

var oneBoundaries = document.getElementById('one').getBoundingClientRect();
document.getElementById('container').addEventListener('mousemove', function(e) {
    var x = e.clientX;
  var y = e.clientY;
  var insideX = x >= oneBoundaries.left && x <= oneBoundaries.right;
  var insideY = y >= oneBoundaries.top && y <= oneBoundaries.bottom;

  if(insideX && insideY){
    console.log('On top of "one"!');
  }
});