api3.geo.admin.ch v3.6.0下OpenLayers3 DragBox在Firefox不显示（Chrome等正常）

核心排查与修复点 #

• 修正初始化阶段的样式引用错误
  你的代码中已经在本地定义了selectionBoxStyle样式实例，但初始化DragBox时传入的是全局olStylesFactory.selectionBoxStyle。Firefox下存在脚本加载时序差异，如果全局对象挂载晚于交互初始化逻辑，该取值会直接为undefined，触发TypeError导致DragBox初始化失败，后续的map.addInteraction()自然不会生效。
  直接替换DragBox构造参数中的style引用为本地定义的样式即可：

  var dragBox = new ol.interaction.DragBox({
    condition: ol.events.condition.always,
    style: selectionBoxStyle // 移除对未可靠初始化的全局工厂对象的依赖
  });
  

• 调整交互注册的时机
  Firefox的JS引擎在处理地图初始化时的渲染节奏与Chrome、IE存在差异，如果你是在页面DOM加载完成后立即调用map.addInteraction(dragBox)，此时地图实例可能还未完成核心渲染逻辑绑定，addInteraction调用会被静默忽略。
  可以将交互注册逻辑放到地图的rendercomplete一次性事件回调中执行，确保地图完全初始化后再绑定交互：

  map.once('rendercomplete', function() {
    map.addInteraction(dragBox);
    // 绑定boxend回调做有效性验证，触发时可在控制台看到日志
    dragBox.on('boxend', () => console.log('框选交互已正常触发'));
  });
  

• 解决事件抢占导致的交互失效
  OpenLayers默认会自动注册平移、滚轮缩放等基础交互，这些交互的事件捕获优先级在Firefox下与Chrome存在差异，会优先拦截mousedown、mousemove事件，导致DragBox收不到拖拽触发信号，表现为框选操作无响应，看起来和addInteraction未生效的现象完全一致。
  可以在初始化DragBox时调整事件匹配条件，手动将交互设为激活状态，避免被其他交互抢占事件：

  var dragBox = new ol.interaction.DragBox({
    // 替换always条件，明确匹配鼠标左键拖拽场景，减少事件冲突
    condition: ol.events.condition.mouseOnly,
    style: selectionBoxStyle
  });
  dragBox.setActive(true);
  

• 排查上层元素的事件拦截问题
  Firefox对DOM元素的事件透传逻辑与Chrome不同，如果地图容器上层存在透明覆盖层（比如加载提示、占位弹窗）未设置pointer-events: none，鼠标事件会直接被覆盖层拦截，根本无法触达地图的事件监听层。可以用Firefox开发者工具的元素选择器，点击地图拖拽区域确认选中的元素是否为地图本身，排除遮挡问题。

快速定位技巧：在map.addInteraction(dragBox)执行完成后，打印map.getInteractions().getArray().includes(dragBox)，如果输出为true，说明交互已经成功注册，问题出在事件拦截或样式渲染环节；如果输出为false，说明交互注册因为初始化时序问题失效，按照上述调整注册时机的方法修复即可。

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