当 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
最佳答案
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.
});
关于jquery-select2 - 单击远离聚焦的 Select2 时触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28095721/