Chrome下modal中的jquery-simple-combobox拖拽滚动条时下拉框收起问题

问题背景 #

我最近在学习使用jquery.scombobox组件，把它放到Modal模态框里的时候遇到了一个奇怪的问题：当下拉选项比较多，组件右侧出现滚动条时，用鼠标滚轮滚动浏览选项是正常的，但一旦点击并拖拽滚动条，下拉框就会突然收起。有没有其他开发者遇到过这个情况？想请教下这个现象的成因是什么？

模拟示例代码（对应原JSFiddle内容） #

<!-- Bootstrap 模态框示例 -->
<div class="modal fade" id="demoModal" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <!-- scombobox 绑定的下拉选择器 -->
        <select id="demoCombobox">
          <!-- 生成大量选项触发滚动条 -->
          <option value="opt1">选项1</option>
          <option value="opt2">选项2</option>
          <option value="opt3">选项3</option>
          <option value="opt4">选项4</option>
          <option value="opt5">选项5</option>
          <option value="opt6">选项6</option>
          <option value="opt7">选项7</option>
          <option value="opt8">选项8</option>
          <option value="opt9">选项9</option>
          <option value="opt10">选项10</option>
          <option value="opt11">选项11</option>
          <option value="opt12">选项12</option>
          <option value="opt13">选项13</option>
          <option value="opt14">选项14</option>
          <option value="opt15">选项15</option>
          <option value="opt16">选项16</option>
          <option value="opt17">选项17</option>
          <option value="opt18">选项18</option>
          <option value="opt19">选项19</option>
          <option value="opt20">选项20</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 初始化 scombobox，设置固定高度触发滚动条
  $("#demoCombobox").scombobox({
    height: 220
  });
  
  // 打开模态框
  $("#demoModal").modal('show');
});
</script>

我碰到的相同情况及成因分析 #

哈哈，这个问题我之前在项目里踩过坑！当时查了好久才找到原因，主要是两个点：

1. 组件的收起逻辑误判了滚动条拖拽事件
   jquery.scombobox的下拉框收起逻辑一般是监听document上的click或者mousedown事件——只要点击的区域不在下拉框内部，就会触发收起动作。但浏览器的原生滚动条比较特殊，拖拽滚动条时的mousedown事件会冒泡到document层面，组件的逻辑会把这个动作当成“点击了下拉框外部”，直接把下拉框收起来了。

2. 模态框的事件处理雪上加霜
   像Bootstrap这类Modal组件本身会对内部的点击事件做拦截，防止点击内容区时关闭模态框，但滚动条的拖拽事件并没有被模态框的逻辑排除，反而和scombobox的收起逻辑撞在了一起，进一步加剧了这个问题。

临时修复方案（亲测有效） #

当时我是给scombobox的下拉容器加了事件阻止冒泡，让拖拽滚动条的事件不会传到document上：

// 找到scombobox的下拉滚动容器，阻止mousedown事件冒泡
$(".scombobox-dropdown").on('mousedown', function(e) {
  e.stopPropagation();
});

这样拖拽滚动条的时候，组件就不会误判成外部点击了，下拉框就能正常保持展开状态。

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