不同zIndex层级的两个元素如何同时响应PointerEvents事件

API 探路者

2026-9-25

实现方案

方案1：上层元素手动转发事件到下层元素
在上层（zIndex=0）元素的指针事件回调中，先执行自身的事件逻辑，再构造相同的指针事件实例派发给下层（zIndex=-1）元素即可。如果需要动态判断当前坐标下的下层元素，可使用document.elementsFromPoint(e.clientX, e.clientY)方法获取该坐标下的所有层叠元素，筛选出目标下层元素后再派发事件。
参考代码：

const upperEl = document.querySelector('.z-index-0');
const lowerEl = document.querySelector('.z-index--1');
// 要转发的事件类型可按需增减
const needForwardEvents = ['pointerdown', 'pointerup', 'pointermove', 'click'];

needForwardEvents.forEach(evtType => {
  upperEl.addEventListener(evtType, (originalEvt) => {
    // 执行上层元素自身逻辑
    console.log(`上层元素触发${evtType}`);
    // 转发事件到下层元素
    const forwardEvt = new PointerEvent(evtType, originalEvt);
    lowerEl.dispatchEvent(forwardEvt);
  });
});

// 下层元素自身的事件监听不受影响
lowerEl.addEventListener('pointerdown', () => {
  console.log('下层元素触发pointerdown');
});

方案2：调整布局避免层叠遮挡
如果业务逻辑允许，修改布局规则消除两个元素的重叠区域，或者将重叠部分抽离为独立公共节点，分别绑定两个元素对应的事件逻辑，无需处理层叠事件穿透问题。
方案3：统一事件接收层分发逻辑
如果两个元素为可视化绘制内容，可额外添加一个和二者重叠区域尺寸一致的透明层，zIndex设为1，所有指针事件都由该透明层统一接收，再根据坐标判断命中的层，分别执行两个元素对应的事件逻辑，该方案适合多层层叠都需要响应事件的场景。