当selectOnClose设置为true时，如何防止select2再次调用select2:close

Question

我正在使用Select2 V.4.0.10

我想要一个select2，它的行为与使用Enter键和Tab键进行选择时的行为相同。

发生的情况是，当使用Tab键进行选择时，关闭事件会被调用两次，而这并不是我们想要做的

var data = [
{ id: 0, text: 'New' },
{ id: 1, text: 'In Process' },
{ id: 2, text: 'Draft' },
{ id: 3, text: 'Submitted' },
{ id: 4, text: 'Deleted' }
];
$(".test").select2({
allowClear: true,
selectOnClose: true,
data: data,
placeholder: "Select a status"
});
$("select.test", "body").off("select2:close").on("select2:close", function (e){
// This is called twice
console.log("select2:close");
});

select.test {
width: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="test"></select>

以下是使用Tab键/Enter键进行选择时触发的select2事件的顺序。

TAB

• select2：打开
• select2：打开
• select2：关闭
• select2:选择
• 变更
• 更改。选择
• select2：关闭
• select2:关闭
• select2:选择
• select2:关闭

输入

• select2：打开
• select2：打开
• select2:选择
• 变更
• 更改。选择
• select2：关闭
• select2:关闭
• select2:选择

Answer 1

由于模式始终相同，解决方案是创建一个变量，当select2:select被触发时，该变量将被打开，并使用它来查看以前是否使用过它。请注意，与其使用全局窗口对象，不如使用类变量或原型属性来存储此布尔值。

var data = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];
window._select2Select = false;
$(document).on('select2:select', "select", function (e) {
window._select2Select = true;
});
$(".test").select2({
allowClear: true,
selectOnClose: true,
data: data,
placeholder: "Select a status"
});
$("select.test", "body")
.off("select2:close")
.on("select2:close", function(e) {
if(window._select2Select){
window._select2Select = false;
return;
}
console.log("select2:close");
window._select2Select = false;
});