jQuery UI触摸打孔单击事件在Android应用中不起作用[重复]

Question

此问题已经在这里有了答案：

jQuery UI Touch Punch is not working in chrome and opera on android device（3个答案）

关闭2个月前。

我已使用“ Jqueryui-touch-punch”库进行拖放。拖放功能和事件在Chrome浏览器和IOS Mobile App上正常运行。

问题在于，在Android应用程序中，拖放操作正常，但单击事件在Android App中不起作用。

[在id="clickinEventFired"上的代码拖放，单击事件基本上发生了什么，在chrome浏览器和ios移动应用上正常运行。

但是在Android App中使用相同的代码，拖放工作正常，但click事件无效。当我们单击“拖动我到处”时，始终会触发拖动事件。

[请帮助我，我犯了什么错误。

代码：

$(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.");
  });
});

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