Select2 v3.5 在swiping/scrolling使用移动设备时打开select

Question

因此，如果您使用移动设备或 browserstack 移动模拟器访问此页面

http://select2.github.io/select2/

然后尝试将指针（手指）指向 select2 框向下滚动页面，然后从 select2 框开始滑动，您会看到它打开了 select2 框。当它滑动时，而不是点击时。

这里我设置了一个基本的codepen example

而如果您尝试在 v4 Select2 上执行相同操作，它将无法打开。

无法迁移到v4.0，强制使用旧版本的问题

有什么方法可以防止在使用移动设备滑动（而不是点击）时打开 select2 框？

我也查看了 this commit 并尝试替换源代码，但没有 work

Answer 1

好的。由于我还没有找到解决这个问题的有效方法，我将 post 我决定如何解决这个问题。

$(document).on("mousedown touchstart", ".select2-container", function(e) {
    $('select').select2('close');
});
$(document).on("mousedown touchend", ".select2-container", function(e) {
    $('select').select2('close');
});

当然不是那么漂亮和合理的解决方法，但按预期工作。

Answer 2

接受的答案使用 mousedown 事件，当我们尝试 open.Also 添加 css("pointer-events", "none") 时，它使 select2 关闭正常的非触摸（鼠标）事件，以便元素是可滚动。

注：

仍然有 select2 打开和关闭的小信号。
选择 2 版本 - 3.5.1
mousedown 在 IE 和 Safari 中存在兼容性问题

$('.select2-container').on("touchmove", function(e) {
  $(this).css("pointer-events", "none");
  $('select').select2("close");
})

$('.select2-container').on("touchstart", function(e) {
  $(this).css("pointer-events", "auto");
});

Answer 3

选择2版本：3.5.1

从您的代码中删除“touchstart”。

selection.on("mousedown", "abbr", this.bind(function (e) {
    if (!this.isInterfaceEnabled()) return;
    this.clear();
    killEventImmediately(e);
    this.close();
    this.selection.focus();
}));

selection.on("mousedown", this.bind(function (e) {
    // Prevent IE from generating a click event on the body
    reinsertElement(selection);

    if (!this.container.hasClass("select2-container-active")) {
        this.opts.element.trigger($.Event("select2-focus"));
    }

    if (this.opened()) {
        this.close();
    } else if (this.isInterfaceEnabled()) {
        this.open();
        e.preventDefault();
    }

    killEvent(e);
}));

Select2 v3.5 在swiping/scrolling使用移动设备时打开select

Select2 v3.5 opens the select when swiping/scrolling using a mobile device

javascript

jquery

jquery-select2