如何在 iPad 上实现 dblclick 事件答案

【问题标题】：How to implement dblclick event on iPad如何在 iPad 上实现 dblclick 事件
【发布时间】：2017-07-18 14:13:56
【问题描述】：

我有一个我为客户创建的选框规划器，它基本上由可以单击的选框和家具组成，并将放置在画布上以进行拖动。我的主要问题是让它在触摸设备上正常工作，特别是 iPad，我通过使用触摸打孔解决了拖动问题，但我无法工作的一件事是双击从画布上删除元素所需的。

这是计划者：https://southwestmarquees.co.uk/newsite/marquee-planner/

如果您打开“家具”选项卡，单击一张桌子，然后双击出现的图标，它将删除它。我使用的代码如下：

$('.' + newItemClass).on('dblclick', function () {
    // remove any table planner data that may have been added.
    var existing_item_id = $(this).find('.add-guests').attr('data-item-id');
    $.ajax({
        type: "POST",
        url: "/newsite/wp-admin/admin-ajax.php",
        dataType: "json",
        data: {
            action: 'remove_table_planner_data',
            item_id: existing_item_id,
            plan_id: $('#plan-id').val()
        },
        success: function (response) {
            console.log(response);
        }
    });

    $(this).css('visibility', 'hidden');
});

只是为了解释一下，remove_table_planner_data 操作只是删除了已为表保存的所有现有数据。我使用可见性，这样画布上已经存在的其他项目都不会受到影响（我发现如果我使用remove()，其他元素会跳来跳去）

我尝试实施在 this page 上提出的建议，即使它识别为 iOS 设备，当我双击屏幕时，我也无法让代码工作。

非常感谢您对此提供的任何帮助，因为此计划器在 iPad 上 100% 正确运行非常重要。

【问题讨论】：

标签： jquery ios ipad

【解决方案1】：

我创建了一个包含所有代码的独立 HTML 文件。只有一个 jQuery 依赖项。我已经通过 codepen 在 iPad 上对其进行了测试：https://codepen.io/anon/pen/ModZyK

代码在这里：

<!DOCTYPE html>
<html>
<head>
  <!-- I added this meta tag to make sure the page doesn't try to zoom when double tapping on iPad -->
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $( document ).ready(function() {
      var timer;
      // wait time between clicks
      var wait_ms = 200;
      // handler for the 1st click which adds the bind for the 2nd click
      first_click_handler = function() {
        clearTimeout(timer);

        $(this).bind('click', second_click_handler);
        timer = setTimeout((function() {
          // unbinding the second click if the user doesn't click within the wait_time, 200ms in this case
          $('.planner-board img').unbind('click', second_click_handler);
        }), wait_ms);
      }
      // handler for the second click, which is only removing the image
      second_click_handler = function() {
        $(this).remove();
      }

      $('.planner-board img').bind('click', first_click_handler);
    });
  </script>
</head>
<body>
  <div class="planner-board">
    <!-- ducks, why not -->
    <img src="http://icons.iconarchive.com/icons/gianni-polito/colobrush/256/software-duck-icon.png">
    <img src="http://icons.iconarchive.com/icons/martin-berube/animal/256/duck-icon.png">
  </div>
</body>
</html>

【讨论】：

嗨，我已经尝试在我的 iPad 上加载它，但双击图像后，什么也没有发生 - 我错过了什么吗？我试了好几次了。
您在尝试使用 codepen 链接吗？尝试使用 wait_ms 变量，较高的值表示较慢的双击。
实际上 - 我刚刚在我同事的 iPhone 上尝试过，它可以工作 - 我猜这一定是 iOS 版本特定的问题......让我尝试更新我的 iPad
这可能是双击速度，玩弄它，看看什么最适合你。
我很确定这是一个过时的 iOS 问题 - 我目前正在升级公司的 iPad - 它有一段时间没有使用了，所以我猜它已经过时了！完成后我会报告。谢谢！