CSS绝对定位堆叠元素的JS事件监听：如何捕获所有层级元素事件

我通过CSS绝对定位把多个元素堆叠在一起，需要监听所有堆叠元素的事件，而不是只触发顶层元素的。不能给顶层元素设pointer-events:none，那样会丢失它自己的事件。我知道父子元素的情况能实现，但找不到非父子仅靠CSS堆叠时的解决办法。

用下面的示例代码测试时，鼠标悬停在白色方块（over）上，黑色方块（under）的事件就不再触发了。我需要同时捕获两者的事件，达到像父子元素那样能监听所有堆叠元素各类事件的效果。

示例代码 #

HTML #

<div class="wrapper">
  <div id="over"></div>
  <div id="under"></div>
</div>

CSS #

#under {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - 100px);
  height: 200px;
  width: 200px;
  background-color: black;
}

#over {
  position: absolute;
  top: 50px;
  left: calc(50% - 50px);
  z-index: 2;
  height: 100px;
  width: 100px;
  background-color: white;
}

.wrapper {
  position: relative;
}

JavaScript #

const over = document.getElementById('over')
const under = document.getElementById('under')

over.addEventListener('mousemove', (event) => {
  console.log("Mouse Div Over");
});
over.addEventListener('click', (event) => {
  console.log("Click Div Over");
});
under.addEventListener('mousemove', (event) => {
  console.log("Mouse Div Under");
});
under.addEventListener('click', (event) => {
  console.log("Click Div Under");
});

仅靠CSS做不到非父子堆叠元素同时捕获鼠标事件，因为浏览器默认只会让顶层可见元素响应事件。这里给两个实用的JS方案：

方案1：手动检测元素位置触发事件 #

监听容器的鼠标事件，用elementsFromPoint获取鼠标位置下所有堆叠的元素，手动调用对应元素的事件处理函数。

修改后的JS代码：

const over = document.getElementById('over')
const under = document.getElementById('under')
const wrapper = document.querySelector('.wrapper')

// 把事件处理逻辑单独拎出来，方便复用
const logOverMouseMove = () => console.log("Mouse Div Over");
const logOverClick = () => console.log("Click Div Over");
const logUnderMouseMove = () => console.log("Mouse Div Under");
const logUnderClick = () => console.log("Click Div Under");

// 给元素绑定原生事件
over.addEventListener('mousemove', logOverMouseMove);
over.addEventListener('click', logOverClick);
under.addEventListener('mousemove', logUnderMouseMove);
under.addEventListener('click', logUnderClick);

// 监听容器的鼠标移动，触发所有堆叠元素的事件
wrapper.addEventListener('mousemove', (e) => {
  const elements = document.elementsFromPoint(e.clientX, e.clientY);
  elements.forEach(el => {
    if (el === over) logOverMouseMove();
    if (el === under) logUnderMouseMove();
  });
});

// 监听容器的点击，触发所有堆叠元素的事件
wrapper.addEventListener('click', (e) => {
  const elements = document.elementsFromPoint(e.clientX, e.clientY);
  elements.forEach(el => {
    if (el === over) logOverClick();
    if (el === under) logUnderClick();
  });
});

这种方式不用改DOM结构，适配各种堆叠场景。

方案2：克隆元素分离视觉与事件 #

给顶层元素克隆一个“影子元素”，影子元素设pointer-events:none不阻挡底层事件，同时原顶层元素保留自己的事件响应，再通过影子元素触发底层元素的事件。

新增CSS #

#over-shadow {
  position: absolute;
  top: 50px;
  left: calc(50% - 50px);
  z-index: 2;
  height: 100px;
  width: 100px;
  pointer-events: none;
}

修改HTML #

<div class="wrapper">
  <div id="over"></div>
  <div id="over-shadow"></div>
  <div id="under"></div>
</div>

修改JS #

const over = document.getElementById('over')
const overShadow = document.getElementById('over-shadow')
const under = document.getElementById('under')

// 原顶层元素保留事件
over.addEventListener('mousemove', () => console.log("Mouse Div Over"));
over.addEventListener('click', () => console.log("Click Div Over"));

// 通过影子元素触发底层元素的事件
overShadow.addEventListener('mousemove', (e) => {
  const moveEvent = new MouseEvent('mousemove', e);
  under.dispatchEvent(moveEvent);
});
overShadow.addEventListener('click', (e) => {
  const clickEvent = new MouseEvent('click', e);
  under.dispatchEvent(clickEvent);
});

under.addEventListener('mousemove', () => console.log("Mouse Div Under"));
under.addEventListener('click', () => console.log("Click Div Under"));

内容的提问来源于stack exchange，提问作者Mushr00m