单击远离聚焦的 Select2 时触发事件

Question

当 select2 对象具有焦点并显示结果时，我需要在页面其他位置的对象上捕获事件（如单击），而不是 select2 对象的子对象。当 select2 结果对象获得焦点时，我无法单击页面其他位置的 button/anchor 并让它执行其操作。它只是关闭 select2 对象。

有办法吗？这是一个显示此行为的演示：http://codepen.io/anon/pen/JoJobW

   <!-- Javascript snippet -->
   $(document).ready(function() { 
       $("#e1").select2(); 

       $("#e2").click(function(){
         alert("click!");
         e.preventDefault();
       });
   });

   <!-- HTML snippet -->
   <select id="e1"></select>
   <a href="#" id="e2">Click here when select2 is focused</a>

使用 select2 v3.5.2 和 jQuery 1.11.0

Answer 1

Select2 将一个 "mask" 元素放在捕获鼠标单击的下拉菜单后面。 Others have complained关于这个。

这里是 jsfiddle 显示掩码元素。

您可以尝试在打开下拉菜单时删除遮罩元素。

$('#e1').select2().on('select2-open', function() {
    $('.select2-drop-mask').remove();
});

当然，这意味着当用户单击下拉菜单时不会关闭它，但您可以在文档（或正文）上添加一个事件处理程序来执行此操作。

$(document).click(function() {
    $("#e1").select2('close');
});

在这种情况下，您必须确保其他元素上的点击事件不会传播到文档。

$('#e2').click(function() {
    alert('click!');
    return false; // Prevent default action and stop propagation.
});

jsfiddle

单击远离聚焦的 Select2 时触发事件

Triggering events when clicking away from a focused Select2

jquery-select2