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

Question

当 select2 对象具有焦点并显示结果时，我需要在页面其他位置的对象上捕获事件(如单击)，而不是 select2 对象的子对象。当 select2 结果对象获得焦点时，我无法单击页面其他位置的按钮/ 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显示 mask 元素。

---

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

$('#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