jQuery在touchstart上动态克隆html元素，然后接收touchmove事件
在移动设备上使用 jQuery 处理触摸事件时，你可能会遇到需要在 touchstart 事件上动态克隆 HTML 元素，并在随后的 touchmove 事件中与这些克隆的元素交互的情况。下面是一个示例，展示如何实现这一功能：
HTML 结构
首先，我们需要一个基本的 HTML 结构，比如一个可以被克隆的元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Touch Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="cloneable" style="width: 100px; height: 100px; background-color: red; margin: 10px;">
Touch and Move Me
</div>
<script src="script.js"></script>
</body>
</html>JavaScript 使用 jQuery
在 script.js 文件中，我们将编写处理触摸事件的逻辑：
$(document).ready(function() {
// 监听 touchstart 事件
$('#cloneable').on('touchstart', function(e) {
e.preventDefault(); // 防止默认行为，如滚动
// 克隆元素并添加到 body
var $clone = $(this).clone();
$('body').append($clone);
// 设置克隆元素的初始位置
var touch = e.originalEvent.touches[0];
$clone.css({
position: 'absolute',
left: touch.pageX - 50, // 假设元素宽度为100px，这样可以使触摸点在元素中心
top: touch.pageY - 50,
backgroundColor: 'blue' // 改变颜色以区分克隆
});
// 监听 touchmove 事件
$(document).on('touchmove', function(e) {
var touchMove = e.originalEvent.touches[0];
$clone.css({
left: touchMove.pageX - 50,
top: touchMove.pageY - 50
});
});
// 监听 touchend 事件，移除事件监听器
$(document).on('touchend', function() {
$(document).off('touchmove');
$(document).off('touchend');
});
});
});代码解释
- 触摸开始 (
touchstart): 当用户触摸#cloneable元素时，该元素被克隆，并添加到<body>中。克隆的元素位置根据触摸位置设置，并稍作调整，使触摸点位于元素中心。 - 触摸移动 (
touchmove): 当触摸点移动时，克隆的元素位置会更新，使其跟随触摸点移动。 - 触摸结束 (
touchend): 当触摸结束时，移除touchmove和touchend事件的监听器，防止对后续操作产生影响。
相关·内容
我在名为tools的div中有一些元素(小部件)。当我单击这些元素时，我想拖放它们，而不是直接拖放它们。我克隆了一个名为newnode的新项目中的元素，这是我想要在编辑器中拖动的内容。在桌面上工作的诀窍是在新元素上触发一个事件，就是$("#newnode").trigger(e); $("#tools").on("mousedown touchstart</e
浏览 15提问于2020-12-13得票数 3
回答已采纳
在我的页面上，当你向右滑动一个元素时，这个元素就会移动。上显示一个div (通过用户交互)时，事件仍然会被触发。我考虑的另一个解决方案是将这些事件绑定到#content中的元素，这些元素应该启用滑动功能。问题是，这些元素是动态添加到页面中的，所以当在页面加载时调用上面的函数时，这些元素不会被考虑在内。然后我考虑使用jQuery的.on()方法，如下所示：
$(&q
浏览 0提问于2012-10-20得票数 0
回答已采纳
5回答
<html> <div id="container"> </body>JS
jQuery('html, body').on('touchstart touchmove', functi
浏览 3提问于2014-03-28得票数 0
我正在为iPad开发一个Javascript / html5项目。我需要能够捕捉元素上的touchmove事件，该元素直到touchstart事件被触发后才会被添加到DOM中(例如，直到用户将手指放在屏幕上之后)。我曾尝试模拟一个touchstart事件，并以编程方式触发它...element.
浏览 0提问于2014-09-19得票数 8
回答已采纳
1回答
我有函数touchstart，touchmove & touchend处理程序，就像一个容器的bellow一样，容器包含许多元素。在touchmove处理程序中，我正在画布中画线。var elem = e.target;} //我想把元素放在接触点上事件的目标是接收<em
浏览 1提问于2013-10-04得票数 2
1回答
我在寻找iOS的解决方案，就像在“桌面世界”中徘徊一样。我的页面上有很多图像项，当用户在图像上移动手指时，实际图像的不透明度为0。(因此，一步操作将隐藏所有项目:) $("img").on "touchstart", ->
$(this).animate({opacity:0}, 100
浏览 2提问于2013-03-05得票数 1
需要你的帮助来理解这个code..Is这个Javascript (表达式语言)或JQuery。我试着去理解，但是没有理解。var start = function () { changed = true; console.log("changed .....");
start()
浏览 0提问于2013-05-31得票数 1
回答已采纳
1回答
我正在使用简单的HTML-5，并使用React JS中的拖放功能，没有任何库。我已经在web上实现了，它工作得很好，但当我在移动设备上时，它就不起作用了。有触摸事件来处理移动设备的触摸事件，但我没有实现任何解决方案。请推荐一些效果好的东西。
浏览 16提问于2019-10-15得票数 0
1回答
是否可以捕获用户在页面元素上向左滑动的时间，然后在滑动发生时运行函数？我有一个解决方案，但是如果你在页面上向下滚动，并且你的手指在元素上稍微向左滑动，它就会运行函数。}} originalCoord.x = event.targetTouches[0].pageX;}
$(document).o
浏览 0提问于2012-11-02得票数 0
回答已采纳
如Mozilla在页面中所述：
在不使用任何库的情况下，获得发生touchmove或touchend事件的元素的最佳方法是什么？
浏览 1提问于2012-05-08得票数 8
回答已采纳
我在Android上实现jQuery Draggable 时遇到了一些问题。我已经创建了html代码，并使用浏览器对其进行了测试。然后我在build.phonegap.com上编译了它。拿到.apk后，我把它安装在我的xperia x8上，它使用的是Android2.2Froyo。应用程序运行良好，但当我拖动对象时，它不会移动。我的方法有问题吗？谢谢
浏览 1提问于2011-05-19得票数 5
回答已采纳
使用中的代码示例来触摸iOS设备上的启用knockout.js UI排序表，在相同的元素上注册knockout.js单击处理程序和jQuery UI可排序时会出现问题。},
if ( event.originalEvent.targetTouches.length !);黑了密码，以便：
浏览 10提问于2012-06-06得票数 1
回答已采纳
目前我正在为ipad Safari开发一个网站addEventListener('touchmove', function(e) { e.preventDefault(); }, true);以防止在拖动内容时背景移动。问题是当我允许某些元素拖动时 //alert (e.target.id);
if ( e.target.className=
浏览 2提问于2013-01-07得票数 1
回答已采纳
2回答
我有一个简单的HTML页面，当我触摸一个div时，我们不能滚动。你可以找到这个页面对于我的例子中的颜色，我很抱歉;)
浏览 0提问于2013-07-18得票数 5
回答已采纳
2回答
所以我有这个javascript代码，可以监听文档中所有元素的触摸事件。document.addEventListener("touchstart", touchHandler, true);document.addEventListener("touchcancel", touchHandler, true);
这很好，但我只想侦听(**.d
浏览 1提问于2013-08-07得票数 0
2回答
我正在构建一个iPad应用程序，它本质上是一系列幻灯片。问题是:有些幻灯片有交互式元素，如按钮、可拖动项目等。问题是，当使用其中一些交互式元素时，会触发swipe事件。
浏览 3提问于2013-02-25得票数 5
回答已采纳
我在一个".container“的DIV元素中创建了5个数字的DIV，如下面所示； <div class="elem1">No 1</div>touchstart、touchmove和touchend事件。在.elem1中容器的触摸启动时，touchstart事件处理程序在event.t
浏览 2提问于2013-10-07得票数 0
3回答
构建web应用程序，并且在触发单击事件时遇到问题。当从Safari的普通实例运行时，它工作得很好，但是当从主屏幕运行时，它失败了。
浏览 2提问于2012-09-01得票数 1
回答已采纳
1回答
我想在div中创建一个div元素的列表。我希望能够向上和向下滚动列表，并且当列表不再滚动时，我希望能够单击列出的元素来执行某些操作。我想不出该怎么做。每当用户触摸div时，都会执行touchmove事件，即使div正在滚动。THen我不知道如何让程序知道div不再滚动，所以下一次触摸元素将触发一个不可滚动的事件.....例如，如果您快速上下滚动，那么div将认为您按下了其中一个元素。
exerciseWrapper是滚动div中的元素。每个元素
浏览 0提问于2013-04-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
