如何阻止上层堆叠Div的鼠标事件穿透至下层JS/jQuery地图？

这种事件穿透的情况在使用SVG热区的地图插件里确实很常见，结合你给出的代码和描述，我整理了几个关键的排查和解决方向：

1. 先修复代码里的拼写错误（最容易忽略的点） #

你在地图形状的点击绑定代码里写了event.preventDeafult();，这里是拼写错误——正确的写法是event.preventDefault();。这个错误会导致你试图阻止默认事件的代码完全失效，地图的原生点击事件自然会继续触发。先把这个修正，再测试效果。

2. 确保弹窗元素能捕获所有鼠标事件 #

虽然你设置了很高的z-index，但有时候元素的pointer-events属性会影响事件捕获。给你的弹窗div添加明确的pointer-events规则，确保它在显示时能拦截所有鼠标事件：

#ipano {
  /* 原有的样式保留 */
  position: fixed;
  min-width: 90vw;
  left: 5vw;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  z-index: -30;
  /* 添加这一行 */
  pointer-events: auto;
}

这里的auto是默认值，但有时候动态修改z-index/opacity后，浏览器的事件处理可能出现异常，显式声明能避免这种情况。

3. 动态禁用地图容器的鼠标事件 #

在弹窗显示时，直接禁用下层地图容器的鼠标事件，弹窗隐藏后再恢复。修改你的toggle_visibility函数：

function toggle_visibility(id) {
  var e = document.getElementById(id);
  var mapContainer = document.querySelector('.city'); // 获取地图容器
  if (e.style.opacity == '1') {
    setTimeout(() => {
      e.style.opacity = '0';
    }, this.animationDelay + 2);
    setTimeout(() => {
      e.style.zIndex = '-30';
      mapContainer.style.pointerEvents = 'auto'; // 恢复地图的鼠标事件
    }, 400);
  } else {
    e.style.zIndex = '999999999';
    mapContainer.style.pointerEvents = 'none'; // 禁用地图的鼠标事件
    setTimeout(() => {
      e.style.opacity = '1';
    }, this.animationDelay + 2);
  }
}

你之前尝试过给地图加pointer-events: none，但可能是没有和弹窗的显示/隐藏状态联动，导致它一直被禁用或者没在正确时机生效。

4. 在弹窗事件中阻止冒泡 #

如果上面的方法还没解决，给弹窗绑定鼠标事件，明确阻止事件向下冒泡到地图元素：

// 给弹窗添加点击、鼠标悬停等事件的阻止冒泡逻辑
const popup = document.getElementById('ipano');
['click', 'mouseover', 'mousemove'].forEach(eventType => {
  popup.addEventListener(eventType, function(e) {
    e.stopPropagation(); // 阻止事件冒泡到下层元素
    e.preventDefault(); // 可选，根据需求是否阻止默认行为
  });
});

这样即使有事件侥幸穿透，也会被弹窗拦截，不会触发地图的事件。

5. 验证弹窗的覆盖范围 #

最后，检查你的弹窗是否真的完全覆盖了地图区域。可以临时给#ipano加一个半透明背景色（比如background: rgba(255,0,0,0.5)），看看它的尺寸和位置是否完全覆盖了.city容器。如果弹窗没有完全覆盖，未覆盖的区域自然会触发地图的事件，这时候需要调整弹窗的width/height或者定位规则。

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