Select2 v3.5在使用移动设备滑动/滚动时打开选择

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

本文关键字：滚动 选择 v3 移动 Select2      更新时间：2023-09-26

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

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

试着用指针(手指)指向select2框向下滚动页面，你开始从select2框上滑动，你会看到它打开了select2框。当它在滑动，而不是点击。

这里我设置了一个基本的相互依赖的例子

而如果您尝试在v4 Select2上做同样的事情，它将无法打开。

我无法迁移到v4.0并被迫使用这个旧版本的问题。

是否有任何方法可以防止打开select2框时，滑动(不点击)他们使用移动设备?

我也看了这个提交，并试图替换源代码，但它没有work

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

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

当然不是那么漂亮和合理的工作，但工作在预期的

接受的答案使用mousedown事件，当我们试图打开时，它使select2关闭为正常的非触摸(鼠标)事件。还添加了css("pointer-events", "none")，使元素是可滚动的。

注意:

  1. 仍然有一个小光点在select2打开和关闭。
  2. select version - 3.5.1
  3. 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");
});

Select2 Version: 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);
}));
相关文章：