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

Question

我需要捕获页面上其他位置的对象上的事件(如单击)而不是select2对象的子对象,而select2对象具有焦点并显示结果.当select2结果对象被聚焦时,我无法单击页面上其他位置的按钮/锚点并让它执行其操作.它只是关闭了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"元素,用于捕获鼠标单击.其他人抱怨这个.

这是一个显示mask元素的jsfiddle.

打开下拉列表时,您可以尝试删除mask元素.

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

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

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

在这种情况下,您必须确保其他元素上的click事件不会传播到文档.

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

的jsfiddle