Firefox 58版本Select Box菜单鼠标点击失效问题排查

我之前也碰到过类似的Firefox版本兼容性坑，结合你的代码分析下来，问题根源应该是Firefox 58对原生<select>元素的事件捕获逻辑做了调整——当你点击包裹select的.custom-select-result容器时，原生select会优先拦截点击事件，导致父容器绑定的click事件无法正常触发，这就是它在Chrome和旧版Firefox中能工作，但在58版本失效的原因。

下面是几个经过验证的解决方案，按优先级推荐：

方案一：让原生Select不拦截鼠标事件（最推荐） #

给内部的原生select添加pointer-events: none的CSS属性，这样它就不会接收任何鼠标事件，点击动作会直接穿透到父级容器，确保绑定的click事件能正常触发：

.custom-select select {
  pointer-events: none;
}

这个改动完全不影响你原有的交互逻辑，只是让容器完全接管点击事件，完美适配Firefox 58的事件模型。

方案二：扩展事件绑定范围 #

如果不想修改CSS，可以把click事件同时绑定到select元素上，确保在Firefox 58中能捕获到点击动作，同时调整逻辑确保操作的是正确的父级容器：

$(".custom-select-result, .custom-select-result select").click(function(evt){
  evt.stopPropagation();
  
  // 定位到实际要操作的.custom-select-result容器
  const $target = $(this).hasClass('custom-select-result') ? $(this) : $(this).parent();
  
  if($target.hasClass('custom-selected')){
    $(".filter-details").hide();
    $(".custom-select-result").removeClass("custom-bg custom-selected");
  }else{
    $('.data-filter .filter-details').hide();
    $('.custom-select-result').removeClass("custom-bg custom-selected");
    $target.addClass("custom-bg custom-selected data-filter");
    $target.children().show();
  }
  
  if (!!navigator.userAgent.match(/iPad/i)) {
    $('body').addClass('results-grid-filter-active');
  }
});

这样不管点击容器还是内部的select，都会触发你的交互逻辑。

方案三：调整CSS的Overflow属性 #

你的.custom-select类设置了overflow: hidden，而父级.custom-select-result是overflow: visible，这可能在Firefox 58中导致元素层级或事件捕获异常。可以尝试调整：

.custom-select {
  overflow: visible;
}

不过这个改动可能影响你的自定义样式，需要结合实际布局测试后再使用。

你可以先试试方案一，一般能快速解决问题，如果还有其他兼容性问题，再考虑方案二或三。

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