监听堆叠元素上的事件答案

【问题标题】：Listening to events on stacked elements监听堆叠元素上的事件
【发布时间】：2016-05-23 06:30:52
【问题描述】：

如果我将三个 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，即使您从技术上将鼠标移到刚刚覆盖的元素上，是否有办法继续收听？

【问题讨论】：

如果我理解正确，这可能会帮助jsfiddle.net/o5pmxrgz/3 我从这个答案stackoverflow.com/a/23384751/2227526 创建它
@FastSnail：这是一种方式，但对我来说不是一个可行的解决方案，因为我无法制作一系列事件。我的真实应用程序有单独的 svg 元素，它们彼此独立工作。

标签： javascript events event-bubbling

【解决方案1】：

我找到了解决问题的方法。我听所有元素的包含元素并计算每当我像这样（小提琴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"!');
  }
});

【讨论】：