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

Posted 2023-05-08

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

【英文标题】：Jquery UI Touch Punch click event is not working in Android app [duplicate]

【发布时间】：2020-06-02 12:18:58

【问题描述】：

我使用“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>

谢谢。

【问题讨论】：

也许这不能解决你的问题，但是当当前版本是 3.4（6 年的差异）时，是否有理由使用 jQuery 版本 1.11？我不知道 touchpunch 是否需要最低版本，但在示例中它显示了 jquery 1.8 版的使用

感谢 Calvin 的回复，但我也使用了以下库，但遇到了同样的问题：

看这里：github.com/furf/jquery-ui-touch-punch/issues/215，解决方案不止一种

欢迎来到 Stack Overflow。我想其他人已经给了你一些很好的建议。 Touch Punch 可以提供很多帮助，但是当事件冒出来时，它也会让人感到困惑。在这种情况下，tap 事件应该虚拟执行click 事件。 tap hold move 应该触发 drag 事件。我还建议考虑为您的 Draggable 制作一个句柄。这对于避免混淆或模棱两可的事件目标非常有帮助。

非常感谢@deblocker 的回答。

【参考方案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.");
  );
);

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

【讨论】：

非常感谢@Twisty 的回答。

@VikashMishra 如果它对你有帮助，我希望你会投票或将其标记为答案。我还建议参加巡回赛：***.com/tour