'jQuery UI Draggable' 防止点击可拖动容器内的元素

Question

我正在构建一个可水平拖动的菜单：

代码非常简单，拖动效果很好：

$draggable.draggable({
   axis: "x",
   distance: 30,
   delay: 40,
   scroll: false
});

这是一个高层次的问题：

• 使用 jQuery Draggable：

  每次您看到鼠标从一个按钮移动到另一个按钮时，您都可以假设我在点击。如您所见，有一些点击被忽略/错过（根本不调用点击回调）。

• 没有 jQuery Draggable

  您可以看到没有错过任何点击（并且由于某种原因，当 jquery draggable 打开时，没有出现这个浏览器蓝色叠加层，这可能是问题的一部分）

---

我尝试使用 jQuery 可拖动的 distance 和 delay 选项，但它似乎不会以任何方式影响问题。

我还有一个可能相关的次要问题。在 Android 9 上，在 Chrome 上，您几乎无法点击按钮。当您单击“填充”部分时它可以工作，而不是文本本身，这对我来说真的很奇怪。在 iOS 上，它运行良好。

---

如果有帮助，这里是标记：

---

你知道为什么 jQuery Draggable 会破坏桌面和/或移动设备上的点击吗？

Answer 1

在 1.12 中，我可以在没有 distance 的情况下单击和拖动。请参阅以下内容。

$(function() {
  $("#pills-container .draggable").draggable({
    axis: "x",
    scroll: false,
    containment: [
      0 - ($(window).width() / 2),
      0,
      $(window).width() + ($(window).width() / 2),
      0
    ]
  });
  $("#pills-container .filter-pill").click(function() {
    $(this).toggleClass("ui-state-highlight");
  });
});

.draggable-container {
  width: 100%;
  padding: 0.4em;
  overflow: none;
}

.draggable-container .filter-pill {
  display: inline-block;
  padding: 0.5em 1em;
  border-width: 2px;
  border-color: transparent;
  border-radius: 20px;
}

.draggable-container .filter-pill.ui-state-highlight {
  border-width: 2px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
  <div id="pills-container" class="ui-widget">
    <div class="draggable-container ui-widget-header">
      <div class="draggable">
        <div class="filter-pill mr-4 ui-widget-content">Location</div>
        <div class="filter-pill mr-4 ui-widget-content">Length</div>
        <div class="filter-pill mr-4 ui-widget-content">Interests</div>
        <div class="filter-pill mr-4 ui-widget-content">More</div>
      </div>
    </div>
  </div>
</div>

我正在使用 FireFox 84（64 位 Linux）进行测试。如果我拖动一个药丸，它也会捕捉到点击。