选中select的option导致外层ul复选框下拉菜单关闭如何解决

问题原因 #

你现有代码仅拦截了.allow-focus容器本身的点击冒泡，部分浏览器中<select>的选项点击事件的冒泡链路和普通DOM元素不同，没有被父容器的事件拦截逻辑覆盖，因此会触发外层下拉菜单的关闭判断。

可行解决方案 #

方案1：补充事件拦截（改动最小）

在原有逻辑基础上，新增针对内嵌<select>元素的事件拦截，同时覆盖click和change两类触发场景：

// 保留原有逻辑
$(document).on('click', '.allow-focus', function(e) {
  e.stopPropagation();
});
// 新增select元素的事件冒泡拦截
$(document).on('click change', '.allow-focus select', function(e) {
  e.stopPropagation();
});

方案2：修改外层关闭逻辑（兼容性最好）

直接调整外层下拉菜单的关闭判断规则，只要点击源属于.allow-focus容器内部，就不执行关闭操作，无需单独为内部元素绑定拦截事件：

// 示例为原生实现的下拉关闭逻辑，可对应替换你现有代码中的关闭判断
$(document).on('click', function(e) {
  // 点击区域在允许聚焦的下拉容器内，直接跳过关闭逻辑
  if ($(e.target).closest('.allow-focus').length) {
    return;
  }
  // 原有下拉菜单关闭代码
  $('#preciplist').hide();
})

如果使用的是第三方UI组件的下拉菜单，可优先查找组件自带的「内部点击不自动关闭」配置项，直接开启即可。

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