AngularJS Dropdown Multiselect选中时弹窗误关，需仅关闭下拉框

这个问题我做项目时也碰到过——本质是下拉组件的点击事件冒泡到了弹窗的关闭逻辑上，导致选中选项时连带触发了弹窗关闭。这里给你几个实用的解决方案：

方法一：阻止事件冒泡（推荐） #

保持你原本的closeOnSelect: true和closeOnDeselect: true配置，然后在组件的onSelect回调里阻止事件向上冒泡，这样下拉框会正常关闭，但事件不会传到弹窗的关闭监听上。

修改你的配置对象，添加onSelect回调：

$scope.dropdownConfig = {
  selectionLimit: 1,
  closeOnSelect: true,
  closeOnDeselect: true,
  // 其他配置...
  onSelect: function(item, $event) {
    // 阻止事件冒泡，避免触发弹窗关闭
    if ($event) {
      $event.stopPropagation();
    }
    // 这里可以添加你自己的选中后逻辑
  }
};

如果组件的onSelect回调默认不传递$event参数，你可以在HTML调用组件时手动传入：

<div angularjs-dropdown-multiselect="dropdownConfig" on-select="onSelectItem(item, $event)"></div>

然后在控制器里定义对应的方法：

$scope.onSelectItem = function(item, $event) {
  if ($event) {
    $event.stopPropagation();
  }
  // 你的业务逻辑
};

方法二：手动控制下拉框关闭 #

如果事件冒泡的方式不生效，你可以先把closeOnSelect设为false，然后在选中选项后手动调用下拉框的关闭方法。

首先给下拉组件加一个标识，比如dropdown-id：

<div angularjs-dropdown-multiselect="dropdownConfig" dropdown-id="singleSelectDropdown"></div>

然后在onSelect回调里手动触发下拉框的关闭：

$scope.dropdownConfig = {
  selectionLimit: 1,
  closeOnSelect: false,
  closeOnDeselect: false,
  // 其他配置...
  onSelect: function(item) {
    // 模拟点击下拉触发器来关闭下拉框
    angular.element('#singleSelectDropdown .dropdown-toggle').click();
    // 你的业务逻辑
  }
};

方法三：修改弹窗的关闭逻辑 #

如果你的弹窗是通过“点击外部区域关闭”的逻辑实现的，你可以在弹窗的关闭判断里排除下拉组件的区域。比如弹窗的关闭监听代码：

angular.element('body').on('click', function(event) {
  const modalElement = angular.element(event.target).closest('.modal');
  const dropdownElement = angular.element(event.target).closest('.angularjs-dropdown-multiselect');
  
  // 如果点击的是下拉组件内部，不关闭弹窗
  if (dropdownElement.length) {
    return;
  }
  
  // 原来的弹窗关闭逻辑
  if (!modalElement.length) {
    // 关闭弹窗的代码
  }
});

这几个方法里，方法一最直接高效，能完美满足你的需求：选中选项后下拉框自动关闭，同时弹窗保持打开状态。

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