聆听堆叠元素上的事件

Question

如果我有3个div叠放在一起，并且我想在mousemove上听最底部的div，那么只有当我实际上只在最底部的元素之上时，我才会得到该事件。 如果将另一个元素部分地放置在该元素的顶部，则在将鼠标移到另一个元素（仅覆盖我的元素，但仍在原始元素上方，现在也超过了新的）。

我创建了一个jsfiddle来显示我的困境： 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"!');
  }
});