Jquery UI Touch Punch点击事件在Android应用程序中不起作用[重复]

Question

我使用“Jqueryui-touch-punch”库进行拖放。拖放功能和事件在 Chrome 浏览器和 IOS 移动应用上运行良好。

问题在于，在 Android 应用上，拖放工作正常，但点击事件在 Android 应用中不起作用。

基本上，id="clickinEventFired" 上的代码拖放和单击事件在 chrome 浏览器和 ios 移动应用上运行良好。

但 Android 应用程序中的相同代码，拖放工作正常，但点击事件不起作用。 当我们点击“Drag me around”时总是触发拖动事件。

请帮我看看我犯了什么错误。

代码：

$(function() {
  $("#draggable").draggable({
    cursor: 'move',
    start: startDrag,
    //stop: stopDrag}
  });

  $("#clickinEventFired").click(function() {
    alert("Handler for .click() called.");
  });
});

function startDrag() {
  alert('Dragging event is fired');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


<div id="draggable" class="ui-widget-content">
  <p id="clickinEventFired">Drag me around</p>
</div>

谢谢。

Answer 1

对于移动设备，您希望更加具体。

这是一个可拖动和可点击项目的示例。

桌面测试：https://jsfiddle.net/Twisty/sd64ux8p/24/

手机测试：https://jsfiddle.net/Twisty/sd64ux8p/24/show/

HTML

<div id="draggable" class="ui-widget">
  <div class="ui-drag-handle">&nbsp;</div>
  <p id="clickinEventFired" class="ui-widget-content">Drag me around</p>
</div>

<div id="log">
</div>

CSS

#log {
  font-family: monospace;
  font-size: 0.75em;
  height: 6em;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

#log p {
  padding: 0;
  margin: 0;
}

.ui-widget {
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #ccc;
  width: 150px;
}

.ui-drag-handle {
  width: 100%;
  height: 18px;
}

.ui-widget-content {
  background: #fff;
  margin: 0;
  padding: 2px;
  border-radius: 3px;
}

JavaScript

$(function() {
  function log(str) {
    $("#log").prepend("<p>" + str + "</p>");
  }
  $("#draggable").draggable({
    cursor: 'move',
    handle: ".ui-drag-handle",
    start: function() {
      log("Drag Start");
    },
    stop: function() {
      log("Drag Stop");
    }
  });

  $("#clickinEventFired").click(function() {
    log("Handler for .click() called.");
  });
});

由于我们添加了一个句柄，我们现在创建一个可视队列，可以在其中单击以拖动。我们还将事件目标分开，因此现在“点击”不会与“拖动”事件混淆。