试图停止 Select2 多选选项删除的事件传播

Posted 2023-05-07

【中文标题】试图停止 Select2 多选选项删除的事件传播

【英文标题】：Trying to stop event propagation of Select2 multi-select option remove

【发布时间】：2016-05-14 08:39:16

【问题描述】：

我的 UI 有一些从 Bootstrap 创建的下拉菜单，我用它来包含一些表单元素。我正在使用我在此处找到的解决方案阻止下拉列表关闭，这几乎是完美的： Avoid dropdown menu close on click inside

剩下的问题是我使用 Select2 多重选择和 remove 一个选项的特定实例。当关闭下拉菜单时，移除行为似乎遵循不同的事件链。我的假设是事件正在传播到父元素，但我似乎无法确定是哪个。

这里有一个JSFiddle 来说明这个问题。选择一个选项，然后将其删除以查看会发生什么。以下是包含 jsfiddle 时所需的代码。当然，它是从我的实际代码中缩减的，但至少代表了问题。

$('body').on('click', '.dropdown .cycle-element', function(e) 
  $(this).parent().toggleClass('open');
);

$('body').on('click', function(e) 
  if (!$('.dropdown').is(e.target) && $('.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) 
    $('.dropdown').removeClass('open');
  
);

$('.dependency-select').select2();

【问题讨论】：

你最终想要达到什么目标？当用户点击点击我打开下拉菜单。当用户在click me 之外单击时关闭下拉菜单？并在用户选择时保持选择选项打开？

jsfiddle.net/fcprvpcm 这是你想要达到的目标吗？

差不多。如果我单击 Bootstrap 下拉区域之外的任何位置，我仍然希望它关闭。您的代码似乎没有我描述的相同问题，但我希望这是因为您只是在单击“单击我”文本时切换打开/关闭。我的主要问题是，如果您选择了一个选项，然后单击删除 x，整个 Bootstrap 下拉菜单将关闭，但选择选项可见并浮动在不知名的地方。试一试，看看我在原始小提琴中的意思。

【参考方案1】：

我们遇到了基本相同的问题。潜在的问题是，当使用 select2 多选时，当您删除选项时触发的取消选择事件会传播并最终关闭引导下拉菜单。

处理这个问题的简单方法是监听事件并停止传播

$('your-select').on("select2:unselect", function(e) 
  if (!e.params.originalEvent) 
    return
  

  e.params.originalEvent.stopPropagation();
);

【讨论】：

我的英雄 :) 谢谢！像魅力一样工作。我知道这与冒泡有关，但在e. 上使用stopPropagation，而不是e.params.originalEvent。

【参考方案2】：

@TheGremlyn 这是你能做的。我还没有完全测试它，但乍一看，当 div 关闭时关闭 select2 似乎是解决方案。

您可以关闭 select2 如下。

$('.dependency-select').select2('close');

这里更新了代码。看看这个。 https://jsfiddle.net/c1ef7138