如何实现点击select类下拉框外部自动关闭？现有方案Linux下失效求助

现有4个下拉组件，代码如下：

<select class="form-dropdown field" name="employee_id" id="employee_id" required="">
        <option value=""> Select Employee ID *</option>
        
        <option value="23137">Sydney Ross ( 23137 )</option>
        
        <option value="E00474">Andy Sandberg ( E00474 )</option>
   
        
      </select>
       <!-- <input type="text" id="employee_id" name="employee_id" placeholder="Employee ID" class="field text-field last-name-field" required style="border: 1px solid #ccc;"> -->

    <span id="span_month" title="">
    <div id="list1" class="dropdown-check-list" tabindex="1" style="">
      <div class="custom-dropdown">
        <span class="anchor" onclick="getElements(list1)">Select Months</span>
          <div class="options">
          <ul id="list1_items" class="items visible" name="month" style="display: block;"><li><input type="checkbox" name="month" value="4" id="4"><label for="4">Apr</label></li><li><input type="checkbox" name="month" value="5" id="5"><label for="5">May</label></li><li><input type="checkbox" name="month" value="6" id="6"><label for="6">Jun</label></li></ul>
        </div>
      </div>
    </div>
    </span>
    <span id="span_quarter" title="">
      <div id="list2" class="dropdown-check-list" tabindex="100" style="">
        <div class="custom-dropdown">
        <span class="anchor" onclick="getElements(list2)">Select Quarter</span>
        <div class="options">
        <ul id="list2_items" class="items visible" name="quarter" style="display: none;"><li><input type="checkbox" name="quarter" value="1" id="1" disabled=""><label for="1"> Apr - Jun (Quarter 1)</label></li></ul>
      </div>
    </div>
  </div>
</span>

<span id="span_year">
  <select class="form-dropdown field" name="year" id="list3_items" required="">
      <option value=""> Select Year *</option>
      <option value="2021"> 2021-2022 </option>
  </select>
</span>

需要实现点击下拉框外部区域自动关闭下拉的效果，现有实现代码如下：

$('html').click(function() {
  $('#list1_items').hide();
});

$('#list1').click(function(event) {
  e.stopPropagation();
  $('#list2_items').hide();
  // $('#list3_items').hide();
});
$('html').click(function() {
  $('#list2_items').hide();
});

$('#list2').click(function(event) {
  event.stopPropagation();
  $('#list1_items').hide();
  // $('#list3_items').hide();
});

该代码在Windows环境下运行正常，但Linux环境下无法生效。

核心问题 #

现有代码存在变量名错误：$('#list1').click的回调参数定义为event，但调用的是e.stopPropagation()，未定义的变量e会直接抛出JS异常。不同浏览器的错误容错机制不同，Windows下的浏览器可能跳过错误继续执行后续逻辑，而Linux下的浏览器遇到未捕获错误会直接终止当前事件队列的执行，导致后续关闭逻辑失效。

修复后代码 #

// 统一绑定全局点击事件，关闭所有自定义下拉
$(document).click(function() {
  $('#list1_items, #list2_items').hide();
});

// 点击月份下拉时阻止事件冒泡，避免触发全局关闭
$('#list1').click(function(event) {
  event.stopPropagation();
  $('#list2_items').hide();
  $('#list1_items').toggle();
});

// 点击季度下拉时阻止事件冒泡，避免触发全局关闭
$('#list2').click(function(event) {
  event.stopPropagation();
  $('#list1_items').hide();
  $('#list2_items').toggle();
});

补充说明 #

原生select标签的下拉展开关闭是浏览器默认行为，无需额外代码控制，若需要自定义原生select的显隐，可以额外添加对应逻辑。

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