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 事件的监听器，防止对后续操作产生影响。