Question

我正在实现一个Select2，用户应该能够选择多个项目，当焦点从我希望保存所选项目的字段中丢失时。我试图使用select2-blur事件，但它经常被触发。一旦选择了选项，它就会触发。 select2的创建时间为：

$(test).select2({
  data:[
    {id:0,text:"Item 1"},
    {id:1,text:"Item 2"},
    {id:2,text:"Item 3"},
    {id:3,text:"Item 4"},
    {id:4,text:"Intem 5"}
  ],
  multiple: true,
  width: "300px"
});

$(test).on("select2-blur", function(e) { doStuffOnLostFocus();});

我创建了一个小提琴，你可以看到模糊事件多次被触发，而不是在select2控件上失去焦点时：http://jsfiddle.net/Wp8Wf/

只有当用户离开select2时，任何人都有一些关于如何做事的好主意吗？

Answer 1

该插件具有自定义事件，因此无法“捕获”blur事件，因为它会在向选择中添加元素并打开/关闭选项下拉列表时创建自己的事件。

这是一个可行的解决方法，但需要根据您可能拥有的其余代码进行微调。

我找到了一个仅在.select2-container-active聚焦时才存在的课程select2。但是这个class会在每个新选择中出现。所以我所做的是等待setTimeout代码工作的select2。如果class仍在那里，那么它仍然集中在select2。如果class不再存在，它会认为它是“正常”blur并运行日志功能。这会产生一个小延迟，但select2是有罪的：）

test.on("select2-blur", function (e) {
    setTimeout(function () {
        var active = $('#s2id_test').hasClass('select2-container-active');
        if (active) {
            return false;
        }
        log("Blur");
    }, 300);
});

Fiddle

Answer 2

这很旧，但是select2的最新版本有一个完整的set of events可以收听。没有模糊，但是有$('#my_id').on('select2:close', event => doStuffOnLostFocus(event));，它非常接近模糊事件。

{{1}}

Select2上的模糊经常被触发

2 个答案:

Fiddle