如何实现点击事件穿透元素且保留该元素的事件监听？

可行，但无法通过纯CSS实现，需要结合JavaScript手动触发下层元素的事件。核心思路是：在上层元素的点击事件处理函数中，先执行自身逻辑，再主动触发下层元素的点击事件。

具体实现步骤 #

• 给上层绝对定位元素绑定点击事件，先处理自身的业务逻辑
• 在同一个事件处理函数中，手动触发下层相对定位元素的点击事件

代码示例 #

HTML结构

<div class="relative-box">
  <div class="absolute-overlay"></div>
</div>

CSS样式

.relative-box {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #e0f7fa;
}

.absolute-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 152, 0, 0.3);
}

JavaScript逻辑

const overlay = document.querySelector('.absolute-overlay');
const relativeBox = document.querySelector('.relative-box');

// 上层元素的点击事件
overlay.addEventListener('click', (e) => {
  // 执行上层元素自身的点击逻辑
  console.log('上层绝对定位div被点击');
  
  // 方式1：直接调用click()方法触发下层元素点击
  relativeBox.click();

  // 方式2：创建更精准的鼠标事件（保留原始点击坐标等信息）
  // const simulateClick = new MouseEvent('click', {
  //   bubbles: true,
  //   cancelable: true,
  //   clientX: e.clientX,
  //   clientY: e.clientY
  // });
  // relativeBox.dispatchEvent(simulateClick);
});

// 下层元素的点击事件
relativeBox.addEventListener('click', () => {
  console.log('下层相对定位div被点击');
});

注意事项 #

• 确保下层元素没有设置pointer-events: none，否则无法被触发
• 如果下层元素的事件处理函数中有event.stopPropagation()，不会影响这里的手动触发（因为手动触发是直接调用目标元素的事件）
• 若需要传递更多事件细节（如按键状态、点击类型），可以通过MouseEvent构造函数的参数补充

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