侦听叠加元素上的事件

Question

如果我有三个div堆叠在一起，并且我想听最底层的div关于mousemove，那么我只有当我实际上是在底部最下面的元素顶部时，我才会得到这个事件。如果另一个元素部分地位于我正在侦听的元素的顶部，那么在我将鼠标移到另一个元素(它只覆盖我的元素，我仍然在原始元素之上，但现在也在新元素上)之后，将不会为该元素抛出该元素。

我创建了一个小提琴来显示我的两难处境：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"!');
  }
});