Bing Maps点击事件在Firefox与Chrome/Edge中触发元素差异问题

点击Bing Maps区域时，Chrome/Edge返回的点击目标是内层孙子元素，而Firefox返回的是父元素，这是由于浏览器对事件命中测试的逻辑差异（比如z-index处理、元素交互优先级判定不同）导致的。以下是几种让Firefox返回与Chrome/Edge一致目标元素的方法：

方法1：通过event.composedPath()手动筛选目标元素 #

利用事件的composedPath()方法获取完整的事件传播路径，从中筛选出你需要的内层元素（匹配Chrome返回的元素类型或选择器）：

document.addEventListener('click', function(event) {
  // 获取事件传播路径数组
  const eventPath = event.composedPath();
  // 替换成你实际需要匹配的内层元素选择器，比如类名、标签名等
  const target = eventPath.find(el => el.matches('.bing-map-inner-element')) || event.target;
  console.log('Element clicked:', target);
});

方法2：调整元素的pointer-events属性 #

如果父元素意外拦截了点击事件，可以通过CSS调整元素的交互优先级，确保内层元素能接收点击：

/* 禁止父元素接收点击事件 */
.bing-map-parent-element {
  pointer-events: none;
}
/* 允许内层元素接收点击事件 */
.bing-map-inner-element {
  pointer-events: auto;
}

注意：此方法可能影响父元素的其他交互行为，需根据实际DOM结构调整选择器。

方法3：使用Bing Maps原生事件绑定 #

Bing Maps提供了自身的事件系统，直接绑定地图的点击事件能避免浏览器间的兼容差异：

// 假设map是你的Bing Maps实例
Microsoft.Maps.Events.addHandler(map, 'click', function(mapEvent) {
  // 地图事件返回的目标会更一致，可根据需求获取对应元素
  console.log('Map clicked target:', mapEvent.target);
});

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