监听堆叠元素上的事件

Question

如果我将三个 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 时进行计算，就像这样 (fiddle 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"!');
  }
});

监听堆叠元素上的事件

Listening to events on stacked elements

javascript

events

event-bubbling