“jQuery UI Draggable”防止在可拖动容器内的元素上进行一些点击

问题描述

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

代码非常简单，拖动工作正常：

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

这是一个高层次的问题：

• 使用 jQuery Draggable：

  

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

• 没有 jQuery Draggable

  

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

---

我尝试使用 jQuery draggable 的 distance 和 delay 选项，但它似乎没有以任何方式影响问题。

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

---

以下是标记，以防万一：

---

您知道为什么 jQuery Draggable 会中断桌面和/或移动设备上的点击吗？

解决方法

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

$(function() {
  $("#pills-container .draggable").draggable({
    axis: "x",scroll: false,containment: [
      0 - ($(window).width() / 2),$(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）进行测试。如果我拖动一个药丸，它也确实会捕捉到点击。