Select2 移动端友好答案

【问题标题】：Select2 Friendly on mobileSelect2 移动端友好
【发布时间】：2018-11-06 11:31:52
【问题描述】：

我的目标是让 select2 在移动设备上更友好，因此我使用 css 样式在页面的所有元素上方显示 select2 项的结果。

我能够做到这一点，但是我遇到了与选择中的点击事件相关的问题。如果我手动调用 select2 （不是通过选择控件），结果会正确显示，但是当我直接单击选择控件时，会显示结果，但显然选择控件上的单击事件会传播，就好像它被单击一样选择的一个选项，导致结果屏幕在打开后不久关闭。

例子：

HTML：

<body>
    <div id="main" style="margin-top: 150px;">
    <select id="example" class="js-example-basic" style="min-width: 200px; margin-top: 200px">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
    <button id="openSelect">Show as Popup (Correctly)</button>
    </div>
    </body>

CSS

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999999;
    font-size: 18px;
    -webkit-transition: all .4s;
    transition: all .4s;

}


.select2-results {   
    height: 90% !important;
}




.select2-results__options {
    max-height: 100% !important;
    height: 100% !important;
    overflow-y: scroll !important;
}




    .select2-dropdown--below {
    display: block !important;
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    background: white !important;
    width: 250px !important;
    height: 100%;
    z-index: 3000 !important;

}

jQuery

$(document).ready(function() {


$('#example').select2({
});


});

$("#openSelect").click(function() {

$('#example').select2("open");

});


$('#example').on('select2:opening', function (e) {
  $('body').addClass("overlay");
});

$('#example').on('select2:closing', function (e) {
  $('body').removeClass("overlay");
});

https://jsfiddle.net/m7n8Lsgc/

我想有可能通过“select2：opening”事件仅拦截对选择的点击，但我没有得到任何成功。

关于如何解决这个问题的任何建议？

【问题讨论】：

@Pete 如果您尝试通过选择不同的选项来多次选择，您会看到它仍然自动关闭，有时它取决于所选元素的位置。

标签： jquery jquery-select2

【解决方案1】：

这是旧线程，但如果有人仍然需要让它工作。

这种行为是因为点击事件被select2的_attachCloseHandler()传播和捕获。 _attachCloseHandler() 将检查打开的容器，更新选择并关闭容器。

我的做法，只是延迟下拉容器的打开，这样_attachCloseHandler()中的检查就会失败，点击事件被忽略。

所以在 select2.js 我改变了：

    Select2.prototype.toggleDropdown = function () {
      if (this.isDisabled()) {
        return;
      }

      if (this.isOpen()) {
        this.close();
      } else {
        this.open();
      }
    };

到

    Select2.prototype.toggleDropdown = function () {
      if (this.isDisabled()) {
        return;
      }

      if (this.isOpen()) {
        this.close();
      } else {
        let that=this;
        setTimeout(function() {that.open();}, 5);
      }
    };

正确的方法当然是找出点击事件传播的地方，如果可能的话取消它。但稍作调整后，我没有找到它在哪里，我只需要一个快速工作的解决方案。

【讨论】：