jquery - Select2 上的模糊经常被触发

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();});

我创建了一个 fiddle ，您可以在其中看到模糊事件被触发的次数比当焦点在 select2 控件上丢失时要多: http://jsfiddle.net/Wp8Wf/

有人对如何仅在用户离开 select2 时执行操作有一些好主意吗？

Answer 1

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

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

我发现一个类.select2-container-active仅在select2聚焦时存在。但是这个类会在每次新选择中出现并继续。所以我所做的是一个 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