火狐移动端AJAX模式Select2触摸选项后选中错位问题求助

• 你使用的Select2 4.1.0-rc.0为候选发布版本，本身存在火狐移动端触摸事件兼容缺陷：该版本对移动端同时绑定了touchstart和click两套事件监听，火狐移动端的事件触发延迟、坐标计算逻辑和其他浏览器存在差异，两套事件先后触发会导致选中位置偏移，最终选中点击位置的上一个选项。
• 默认配置下Select2会自动识别移动端环境启用触摸优化逻辑，该逻辑和火狐移动端的视口坐标计算存在冲突，会放大选项定位的偏移误差。
• 你当前的AJAX配置本身没有语法错误，但动态加载的选项如果没有固定高度，火狐移动端会在选项渲染完成前就计算点击坐标，也会导致定位偏差。

• 优先修改Select2初始化配置，强制关闭移动端专属触摸逻辑，回退到通用点击事件逻辑即可解决绝大多数场景的问题，修改后的初始化代码如下：

$(document).ready(function() {
    $('#custom-select').select2({
        ajax: {
            url: 'ajax/example',
            dataType: 'json',
        },
        // 新增以下三个配置项
        isMobile: function() {
            return false;
        },
        dropdownAutoWidth: true,
        selectOnClose: false
    });
});

• 如果上述配置修改后仍存在偏移，可以手动覆盖触摸事件逻辑，避免两套事件重复触发，在初始化代码后添加如下逻辑：

$(document).on('touchstart', '.select2-results__option', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).trigger('click');
});

• 仍未解决的情况下可以将Select2版本降级到4.0.13稳定版，该版本不存在火狐移动端的点击偏移兼容问题。

内容的提问来源于stack exchange，提问作者Chris Dixon