gpt4 book ai didi

jquery - 如何在iPad上实现dblclick事件

转载 作者:行者123 更新时间:2023-11-29 00:16:41 25 4
gpt4 key购买 nike

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

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

如果您打开“家具”选项卡,单击一张 table ,然后双击出现的图标即可将其删除。我使用的代码如下:

$('.' + 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 只是删除已经为表保存的任何现有数据。我使用可见性,这样 Canvas 上已经存在的其他项目都不会受到影响(我发现如果我使用 remove(),其他元素会跳来跳去)

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

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

最佳答案

我已经创建了一个包含所有代码的独立 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>

关于jquery - 如何在iPad上实现dblclick事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45169332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com