MapBox技术问题：如何阻止顶层图层事件触发底层图层？

针对你遇到的点击/悬停PanelsID（圆形）图层时，下层Panels（矩形）图层事件被同时触发的问题，给你几个实用的解决办法：

方法1：阻止事件冒泡 #

在PanelsID图层的事件处理函数中调用stopPropagation()，直接截断事件传递路径，不让事件到达下层的Panels图层。示例代码：

// 点击事件处理
map.on('click', 'PanelsID', function(e) {
  // 执行移除所有面板的逻辑
  removeAllPanels();
  // 阻止事件向下传递
  e.stopPropagation();
});

// 悬停事件处理
map.on('mouseenter', 'PanelsID', function(e) {
  // 执行PanelsID的悬停逻辑
  highlightPanelID();
  e.stopPropagation();
});

方法2：精确筛选触发事件的图层 #

在Panels图层的事件处理函数中，只响应来自自身图层的特征，忽略上层图层触发的事件。通过queryRenderedFeatures限定查询的图层：

map.on('click', 'Panels', function(e) {
  // 仅查询Panels图层的特征
  const targetFeatures = map.queryRenderedFeatures(e.point, { layers: ['Panels'] });
  // 如果没有匹配到Panels的特征，直接返回
  if (targetFeatures.length === 0) return;
  
  // 执行Panels图层的原有事件逻辑
  handlePanelClick(targetFeatures[0]);
});

方法3：调整图层交互属性 #

给PanelsID图层显式设置pointer-events: all（确保它优先捕获所有鼠标事件）；如果需要临时禁用Panels图层的交互，可以在PanelsID触发事件时，动态修改Panels图层的pointer-events属性，处理完后按需恢复：

map.on('click', 'PanelsID', function(e) {
  // 临时禁用Panels图层的交互
  map.setLayoutProperty('Panels', 'pointer-events', 'none');
  // 执行移除面板逻辑
  removeAllPanels();
  // 可选：如需恢复Panels的交互，添加延时或对应逻辑恢复
  // setTimeout(() => map.setLayoutProperty('Panels', 'pointer-events', 'all'), 100);
});

内容的提问来源于stack exchange，提问作者Ala Eddine Menai