jquery Sortable 防止 click() 或 dblclick() 事件在移动设备上触发

Posted 2023-05-08

技术标签:

【中文标题】jquery Sortable 防止 click() 或 dblclick() 事件在移动设备上触发【英文标题】：jquery Sortable preventing click() or dblclick() events from firing on mobile device 【发布时间】：2021-08-15 22:03:29 【问题描述】：

我正在使用 jquery sortable 对我的网络应用程序上的照片进行排序，它可以根据需要完美地完成这项工作。但是，我无法在可排序列表项的元素上触发click() 或dblclick() 或on('click')，基本上是任何点击事件，这里是图像。

html

<ul id="sortable" class="reorder-gallery mt-5">
  <li class="ui-state-default mediaSort" id="1" data-name="1.png">
    <img src="images/1.jpg" >
  </li>
  <li class="ui-state-default mediaSort" id="2" data-name="2.png">
    <img src="images/2.jpg" >
  </li>
  <li class="ui-state-default mediaSort" id="3" data-name="3.png">
    <img src="images/3.jpg" >
  </li>
  <li class="ui-state-default mediaSort" id="4" data-name="4.png">
    <img src="images/4.jpg" >
  </li>
</ul>

// JQUERY SORTABLE
$("#sortable").sortable(
  axis: 'x,y',
  containment: "parent",
  tolerance:'pointer',
    update: function(event, ui) 
    var item_order = new Array();
    $('ul.reorder-gallery li').each(function() 
        item_order.push($(this).attr("id"));
    );
    $.ajax(
        type: "POST",
        url: "processes/sort.php",
        data: 'order='+item_order,
        cache: false,
      success: function(data)
    );
    
).disableSelection();


// DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
$(".mediaSort").dblclick(function()
  alert("Double Clicked!!");
);

上述双击功能不起作用。但是，为了测试，我尝试完全注释掉上面的 Sortable 函数以使其无效。瞧！双击完美。这意味着 Sortable 函数正在阻止点击事件触发。有什么解决办法吗？

【问题讨论】：

您是否在使用其他库，例如 Touch Punch？是的，我正在使用 Touch Punch.. 它放在 jquery-ui.js 之后的页脚中请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example 您当前的示例需要 PHP 解析，并且示例应包含 HTML 输出。 @Twisty Done.. 请检查:) 【参考方案1】：

如果我没看错的话，Touch Punch 似乎不能很好地处理“双击”：https://github.com/furf/jquery-ui-touch-punch/issues/25

考虑一下：jQuery on 'double click' event (dblclick for mobile)

我创建了以下小提琴进行测试：

https://jsfiddle.net/Twisty/uhyzgaL7/

移动测试：

https://jsfiddle.net/Twisty/uhyzgaL7/show/

JavaScript

$(function() 
  function myLog(string) 
    $("#log").prepend("<span>" + string + "</span>");
  

  function doubleClick(event, callback) 
    var touchtime = $(event.target).data("touch-time");
    console.log("DC:", touchtime);
    if (touchtime == undefined || touchtime == 0) 
      // set first click
      $(event.target).data("touch-time", new Date().getTime());
     else 
      // compare first click to this click and see if they occurred within double click threshold
      if (((new Date().getTime()) - touchtime) < 800) 
        // double click occurred
        console.log("DC Callback triggered");
        callback();
        $(event.target).data("touch-time", 0);
       else 
        // not a double click so set as a new first click
        $(event.target).data("touch-time", new Date().getTime());
      
    
  

  function removeItem(selector) 
    var item = $(selector);
    var parent = item.parent();
    item.remove();
    parent.sortable("refresh");
  

  $("#sortable").sortable(
    axis: 'x,y',
    containment: "parent",
    tolerance: 'pointer',
    update: function(event, ui) 
      var item_order = $(this).sortable("toArray");
      myLog("Array Created: " + item_order.toString());
      $.ajax(
        type: "POST",
        url: "processes/sort.php",
        data: 
          list: "gallery",
          order: item_order
        ,
        cache: false,
        success: function(data) 
          myLog("Success");
        
      );
    
  ).disableSelection();

  // DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
  /*
  $(".mediaSort").dblclick(function(event) 
    console.log("Double Click Detected");
    myLog("Double Click " + $(this).attr("id"));
  );
  */
  $(".mediaSort").click(function(e) 
    console.log(new Date().getMilliseconds());
    var self = $(this).get(0);
    doubleClick(e, function() 
      myLog("Remove Item: " + $(self).attr("id"));
      removeItem(self);
    );
  );
);

这在移动设备中效果不佳，在 android 上使用 Chrome 进行测试。

我建议您为每个图标添加一个可以用作关闭/删除按钮的图标。请看：

https://jqueryui.com/droppable/#photo-manager

更新

您可以添加一个句柄，这样可以更好地解决它。

示例：https://jsfiddle.net/Twisty/uhyzgaL7/68/

手机：https://jsfiddle.net/Twisty/uhyzgaL7/68/show/

HTML

<div class="ui-helper-clearfix">
  <ul id="sortable" class="reorder-gallery mt-5">
    <li class="ui-state-default mediaSort" id="item-1" data-name="1.png">
      <h5>Item 1</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+1" >
    </li>
    <li class="ui-state-default mediaSort" id="item-2" data-name="2.png">
      <h5>Item 2</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+2" >
    </li>
    <li class="ui-state-default mediaSort" id="item-3" data-name="3.png">
      <h5>Item 3</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+3" >
    </li>
    <li class="ui-state-default mediaSort" id="item-4" data-name="4.png">
      <h5>Item 4</h5>
      <img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+4" >
    </li>
  </ul>
</div>
<div id="log">
</div>

JavaScript

$(function() 
  function myLog(string) 
    $("#log").prepend("<span>" + string + "</span>");
  

  function doubleClick(event, callback) 
    var touchtime = $(event.target).data("touch-time");
    console.log("DC:", touchtime);
    if (touchtime == undefined || touchtime == 0) 
      // set first click
      $(event.target).data("touch-time", new Date().getTime());
     else 
      // compare first click to this click and see if they occurred within double click threshold
      if (((new Date().getTime()) - touchtime) < 800) 
        // double click occurred
        console.log("DC Callback triggered");
        callback();
        $(event.target).data("touch-time", 0);
       else 
        // not a double click so set as a new first click
        $(event.target).data("touch-time", new Date().getTime());
      
    
  

  function removeItem(selector) 
    var item = $(selector);
    var parent = item.parent();
    item.remove();
    parent.sortable("refresh");
  

  $("#sortable").sortable(
    axis: 'x,y',
    containment: "parent",
    tolerance: 'pointer',
    handle: "h5",
    update: function(event, ui) 
      var item_order = $(this).sortable("toArray");
      myLog("Array Created: " + item_order.toString());
      $.ajax(
        type: "POST",
        url: "processes/sort.php",
        data: 
          list: "gallery",
          order: item_order
        ,
        cache: false,
        success: function(data) 
          myLog("Success");
        
      );
    
  ).disableSelection();

  // DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
  $(".mediaSort").dblclick(function(event) 
    console.log("Double Click Detected");
    myLog("Double Click " + $(this).attr("id"));
    removeItem(this);
  );
  /*
  $(".mediaSort").click(function(e) 
    console.log(new Date().getMilliseconds());
    var self = $(this).get(0);
    doubleClick(e, function() 
      myLog("Remove Item: " + $(self).attr("id"));
      removeItem(self);
    );
  );
  */
);

【讨论】：

@Mr.Crypto 听起来可能是句柄问题。由于没有为 Sortable 定义句柄，因此整个 LI 都是句柄，它获取 Sortable 的 Click 事件。定义句柄可能会有所帮助。这不仅仅是双击。正如我在问题中提到的，它也不适用于 .click() 或 .on('click') ..!! :(我也不认为Touch Punch是问题，因为正如我在问题中已经提到的那样，如果我注释掉可排序功能并单独尝试双击功能，它就像在移动设备上的魅力一样。当可排序时出现问题是使用过。看起来jquery ui的拖动排序与点击是互斥的。因此，我正在尝试找到一种解决方案，让两者一起工作。按li内的图像进行排序处理？已经试过了。没用。经过测试，添加标题作为句柄，按预期工作：jsfiddle.net/Twisty/uhyzgaL7/66 使用包含的 DoubleClick 测试，它也可以工作：jsfiddle.net/Twisty/uhyzgaL7/68@Mr.Crypto

以上是关于jquery Sortable 防止 click() 或 dblclick() 事件在移动设备上触发的主要内容，如果未能解决你的问题，请参考以下文章

jQuery UI可排序点击事件

jQuery UI Sortable -- 如何取消拖动/排序项目的点击事件？

关于jquery ajax问题

jQuery click - 防止移动设备中的多次点击

防止在可排序的 JqueryUI 中删除列表项

将可拖动对象放入可排序对象后，jQuery Click 事件不起作用