阻止Bootstrap IE下拉菜单关闭滚动条

Question

在IE中，点击下拉菜单滚动条，下拉菜单关闭。使用鼠标滚轮滚动它时，它工作正常。

以下是codeply链接：https://www.codeply.com/go/Uh8qadr3q2

建议我解决此问题的最佳方法是什么。

Answer 1

新答案

在下拉菜单中添加一个可滚动的div元素：

<div class="dropdown-menu" role="menu">
  <div class="scrollable-menu">
    <ul class="list-unstyled">
      <li class="dropdown-item"><a href="#">Action</a></li>
      ...
    </ul>
  </div>
</div>

---

旧答案

我使用的解决方案是添加

onclick="event.stopPropagation();"

到.dropdown菜单

然后致电

$('.dropdown-toggle').dropdown('toggle');

在下拉菜单中单击某个项目时

Answer 2

我看到许多开发人员正在寻求绕过此问题。因此，我在这里分享我的解决方案。想法是将单击事件的范围限定在不包括滚动条的目标元素边界内：

将此检查添加到您的handleMouseEvent中：

if (e.offsetX <= e.target.clientWidth) { onClickOutsideEvent(e); }

其中offsetX属性是该事件与目标节点的填充边缘之间的鼠标指针的X坐标。

对于没有CSS或内联布局框的元素，clientWidth属性为零；否则，它是元素的内部宽度（以像素为单位）。它包括填充，但不包括边框，边距和垂直滚动条（如果有）。

开发人员经常遇到的问题是由于使用clientX属性而不是offsetX。 clientX提供事件发生所在的应用程序客户区域（整个文档窗口分辨率）内的水平坐标，在使用滚动条输入模式弹出窗口的情况下，这不是我们想要的。在这种情况下，我们需要模态尺寸内的鼠标单击偏移量，而不是整个文档中的偏移量。

希望有帮助