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

Question

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

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

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

这是一个高层次的问题：

With jQuery 可拖动：

每次您看到鼠标从一个按钮移到另一个按钮时，您都可以假设我正在单击。正如您所看到的，有一些点击是 ignored/missed（根本没有调用点击回调）。
无 jQuery 可拖动

您可以看到没有遗漏任何点击（出于某种原因，当 jquery 可拖动打开时，浏览器蓝色覆盖层不会出现，这可能是问题的一部分）

我尝试使用 jQuery 可拖动的 distance 和 delay 选项，但它似乎对问题没有任何影响。

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

以下是标记以防有帮助：

您知道为什么 jQuery Draggable 会破坏桌面 and/or 移动设备上的点击吗？

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）进行测试。如果我拖动药丸，它也会捕捉到点击。

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

'jQuery UI Draggable' prevents some clicks on elements inside the draggable container

android

jquery-ui

onclick

jquery-ui-draggable

vue.js