Question

我有一个我为客户创建的选框规划器，它基本上由可以点击的马戏团和家具组成，并将被放置在画布上以便被拖动。我的主要问题是让它在触摸设备上正常工作，特别是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上正常工作非常重要。

Answer 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上实现dblclick事件

1 个答案: