如何实现高z-index元素向下透传事件但排除click点击事件

下面提供两种可落地的实现方案，你可以根据自己的业务场景选择：

方案1：覆盖层手动派发事件（兼容性最好，覆盖层可保留自身交互） #

该方案不需要修改原有marker的逻辑，所有控制逻辑都在覆盖层实现：

• 高z-index覆盖层保留默认pointer-events: auto属性，确保可以正常捕获所有鼠标事件
• 在覆盖层上监听mouseenter、mousemove、mouseleave事件，通过document.elementFromPoint API获取当前坐标下被覆盖的marker元素
• 匹配到对应marker后，手动构造并派发鼠标事件触发marker的悬停逻辑
• 在覆盖层上监听click事件，直接拦截不向下透传

参考代码：

const overlay = document.querySelector('.overlay') // 替换为你的覆盖层选择器
const markerClassName = 'custom-marker' // 替换为你的marker类名
let activeMarker = null

// 处理悬停相关事件的透传
['mouseenter', 'mousemove', 'mouseleave'].forEach(evtName => {
  overlay.addEventListener(evtName, e => {
    // 临时关闭覆盖层的事件响应，获取下方真实元素
    overlay.style.pointerEvents = 'none'
    const targetEl = document.elementFromPoint(e.clientX, e.clientY)
    overlay.style.pointerEvents = 'auto'

    // 匹配marker元素（如果marker有子元素可以用closest匹配）
    const currentMarker = targetEl?.closest(`.${markerClassName}`)
    if (currentMarker) {
      if (activeMarker !== currentMarker) {
        // 触发上一个悬停marker的离开事件
        activeMarker?.dispatchEvent(new MouseEvent('mouseleave', e))
        // 触发当前marker的进入事件
        currentMarker.dispatchEvent(new MouseEvent('mouseenter', e))
        activeMarker = currentMarker
      }
    } else if (activeMarker) {
      // 移出所有marker范围，触发离开事件
      activeMarker.dispatchEvent(new MouseEvent('mouseleave', e))
      activeMarker = null
    }
  })
})

// 拦截所有点击事件，不向下透传
overlay.addEventListener('click', e => {
  e.stopPropagation()
  e.preventDefault()
  // 如果覆盖层自身需要点击逻辑，可以在这里补充
})

方案2：CSS穿透 + 点击逻辑过滤（实现更简单，适合小项目） #

该方案需要修改原有marker的点击回调，代码量更少：

• 给高z-index覆盖层设置CSS属性pointer-events: none，让所有鼠标事件直接穿透到下方元素，此时marker的mouseenter、mouseleave可以原生触发不需要额外处理
• 在marker的点击回调中增加判断，识别当前点击是否被覆盖层遮挡，是则终止逻辑执行

参考代码：

.overlay {
  z-index: 999; /* 你的原有z-index值 */
  pointer-events: none; /* 允许所有事件穿透 */
}

// 你的原有marker点击回调
function handleMarkerClick(e) {
  const overlay = document.querySelector('.overlay')
  // 临时恢复覆盖层的事件响应，判断点击位置顶层元素是否为覆盖层
  overlay.style.pointerEvents = 'auto'
  const topElement = document.elementFromPoint(e.clientX, e.clientY)
  overlay.style.pointerEvents = 'none'

  // 如果顶层元素是覆盖层，不执行后续点击逻辑
  if (topElement === overlay) return
  // 原有点击逻辑写在下方
  // ...
}

注意事项 #

• 如果marker元素内部嵌套了子元素，匹配marker时用closest方法可以避免子元素导致的匹配失败
• 手动派发事件时传入原生事件对象，可以保证坐标、冒泡行为和原生触发完全一致

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