开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

触摸事件 touchstart、touchmove、touchend

目录触摸事件概述触摸事件编码触摸手指个数分析触摸目标 DOM 元素分析触摸位置分析 ---- 触摸事件概述 1、HTML5 中， PC 端基于鼠标的界面互动主要是单击，移动端界面交互方式主要是触摸...2、移动端浏览器触摸事件：事件名称描述是否包含 touches 数组 touchstart 触摸开始，多点触控，后面的手指同样会触发是 touchmove 接触点改变，滑动时是 touchend...3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。 4、主要就是在绑定事件的部分略有不同，可以参考 HTML DOM addEventListener() 方法触摸手指个数分析 1、如下所示，将屏幕上触摸的手指个数信息打印出来进行分析。...3、tSize 是当前位于屏幕上的所有手指的列表个数、targetTSize 是位于当前绑定事件的 DOM 元素上手指的列表个数、changedTSize 是涉及当前事件手指的列表个数。

1.6K2 0

移动端轮播图笔记

触屏事件可以相应用户手指对屏幕或者触控板操作常见的触屏事件： 1.touchstart：手指触摸到一个DOM元素时触发 2.touchmove：手指在一个DOM元素上滑动时触发 3.touchend：...手指从一个DOM元素上移开时触发 1.2触摸事件对象（TochEvent） TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...这类事件用于描述一个或者多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等 touchstart、touchmove、touchend三个时间都会各自有事件对象触摸事件对象终点我们看三个常见对象列表...(); 2.移动轮播案例三张图片进行轮播，需要将第一张克隆一张到最后，最后一张克隆一张到第一张，大概意思为下图： 11.jpg html布局 ...然后移动无缝滚动实现完之后接着实现改变li小圆点的样式变换这里介绍一个新的classList属性：它是HTML5新增的一个属性，返回元素的类名，但是ie10以上的版本才支持，该属性用于在元素中添加、

2.5K2 1

10-移动端开发教程-移动端事件

最基本的touch事件包括4个事件： touchstart：当在屏幕上按下手指时触发 touchmove：当在屏幕上移动手指时触发 touchend：当在屏幕上抬起手指时触发 touchcancel...(e) { console.log('touchstart'); }); 2.3 touchmove事件当用户在触摸屏上移动触点(手指)的时候，触发这个事件...一定是先要触发touchstart事件，再有可能触发 touchmove 事件。 touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。...先放1个手指在其他地方，然后再放1个手指在div上先放1个手指在其他地方，然后再逐渐放2个手指在div上 3.3 Touch详解 Touch表示用户和触摸设备之间接触时单独的交互点...：手指在屏幕上向下滑动时会触发 5.3 zepto的手势相关事件 Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库，它适配了jQuery的大部分api，也就是jQuery怎么用

6.8K8 0

jQuery基础教程之事件监听操作

jQuery基础教程之事件监听操作一、事件监听方法 1.执行事件 $("p").click(); 2.监听事件 $("p").click(function(){...事件类型鼠标事件 click 点击 dblclick 双击 mouseenter 鼠标进入 mouseleave 鼠标离开 touch 触摸事件 touchstart 触摸开始 touchmove...移动 touchend 触摸结束键盘事件 keydown 键盘按下 keyup 键盘放开表单事件 submit 表单提交 change 内容改变 focusin 当元素获得焦点时...focusout 当元素失去焦点时文档/窗口事件 load 窗口载入 resize 窗口更改大小 scroll 滚动三、回调函数 $("p").on("click", function...touchmove touchend",".item",function(event){ console.log(event.type) }) $(

8991 0

10-移动端开发教程-移动端事件

最基本的touch事件包括4个事件： touchstart：当在屏幕上按下手指时触发 touchmove：当在屏幕上移动手指时触发 touchend：当在屏幕上抬起手指时触发...2.1 touch事件与click事件同时触发在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...(e) { console.log('touchstart'); }); 2.3 touchmove事件当用户在触摸屏上移动触点(手指)的时候，触发这个事件...一定是先要触发touchstart事件，再有可能触发 touchmove 事件。 touchmove 事件的target 与最先触发的 touchstart 的 target 保持一致。...先放1个手指在其他地方，然后再放1个手指在div上 ? 先放1个手指在其他地方，然后再逐渐放2个手指在div上 ?

6.4K7 0

JavaScript——触屏事件

常见的触屏事件如下：触屏touch事件说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发...touchstart、touchmove、touchend三个事件都会各自事件对象触摸事件对象重点我们看三个常见对象列表：触摸列表说明 touches 正在触摸屏幕的所有手指的一个列表 targetTouches...正在触摸当前DOM元素上的手指的一个列表 changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素...但是拖动元素需要当前手指的坐标值我们可以使用targetTouchies[0]里面的pageX和pageY 移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离手指移动的距离...：手指滑动中的位置减去手指刚开始触摸的位置拖动元素三步曲：触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置移动手指touchmove：计算手指的滑动距离，并且移动盒子离开手指

2.1K1 0

「移动端」touch事件，touchEvent对象

一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意移动 tounchend - 手指在元素上按下之后，屏幕任意位置抬起时触发...touch：事件只能在移动端使用，mouse ：事件只能在 PC 端使用。 touchstart：只能在绑定元素内按下触发，touchmove、touchend可以在屏幕的任意位置执行。...而 mousedown、mousemove、mouseup 都只能在绑定元素内执行。 touchmove、touchend 只能在 touchstart 触发后，才能执行。...但是 mousemove 只要鼠标在绑定元素上，不按下也能执行。...，手机如何访问电脑上本地网页，建议使用Browsersync，手机运行网页，手机触摸屏幕，在元素上触摸等观察上述三个属性打印情况。

1K3 0

【移动端】touch事件及穿透事件

bug收集：专门解决与收集bug的网站网址：www.bugshouji.com touch 事件的来历 2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚...苹果的解决方案：方案一：双指进行缩放方案二：在屏幕上双击进行放大（单击300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题解决方案，就是使用touch事件来替代移动端新增...touch事件 --- 只能使用现代事件进行添加 touchstart: 触摸开始 touchmove: 触摸移动 touchend: 触摸结束 touchcancel：touch 取消，如来电等...触摸开始后，不管touchmove , touchend 是否移出开始触摸的元素，e.target都是开始时触摸的元素dom....e.targetTouches：作用在当前元素上的所有触点信息【扩展】touch事件中的touches、targetTouches和changedTouches详解 https://www.cnblogs.com

2K1 0

「移动端」touch事件，touchEvent对象

一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意移动 tounchend - 手指在元素上按下之后，屏幕任意位置抬起时触发...touch：事件只能在移动端使用，mouse ：事件只能在 PC 端使用。 touchstart：只能在绑定元素内按下触发，touchmove、touchend可以在屏幕的任意位置执行。...而 mousedown、mousemove、mouseup 都只能在绑定元素内执行。 touchmove、touchend 只能在 touchstart 触发后，才能执行。...但是 mousemove 只要鼠标在绑定元素上，不按下也能执行。...，手机如何访问电脑上本地网页，建议使用Browsersync，手机运行网页，手机触摸屏幕，在元素上触摸等观察上述三个属性打印情况。

1.2K3 0

「移动端」touch事件，touchEvent对象

一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意移动 tounchend - 手指在元素上按下之后，屏幕任意位置抬起时触发...touch：事件只能在移动端使用，mouse ：事件只能在 PC 端使用。 touchstart：只能在绑定元素内按下触发，touchmove、touchend可以在屏幕的任意位置执行。...而 mousedown、mousemove、mouseup 都只能在绑定元素内执行。 touchmove、touchend 只能在 touchstart 触发后，才能执行。...但是 mousemove 只要鼠标在绑定元素上，不按下也能执行。...，手机如何访问电脑上本地网页，建议使用Browsersync，手机运行网页，手机触摸屏幕，在元素上触摸等观察上述三个属性打印情况。

2K2 0

touch事件，touchEvent对象

一、touch事件类型 touchstart - 手指触摸屏幕，在元素上按下时触发 touchmove - 手指移动，在元素上按下之后屏幕上任意移动 tounchend - 手指在元素上按下之后，屏幕任意位置抬起时触发...touch：事件只能在移动端使用，mouse ：事件只能在 PC 端使用。 touchstart：只能在绑定元素内按下触发，touchmove、touchend可以在屏幕的任意位置执行。...而 mousedown、mousemove、mouseup 都只能在绑定元素内执行。 touchmove、touchend 只能在 touchstart 触发后，才能执行。...但是 mousemove 只要鼠标在绑定元素上，不按下也能执行。...，手机如何访问电脑上本地网页，建议使用Browsersync，手机运行网页，手机触摸屏幕，在元素上触摸等观察上述三个属性打印情况。

9193 0

第127天：移动端-获取触摸点的位置

一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) （1）手指触摸开始时记录手指所在的坐标X （2）获取界面上的轮播图容器 var $carousels=$('.carousel')...next':'prev'); javascript代码 1 //移动端轮播图滑动 2 3 //1、先获取手指在轮播图元素上的滑动方向(左右) 4 //手指触摸开始时记录手指所在的坐标...next':'prev'); 40 41 42 43 } 二、移动端获取触摸点的方式说明 1.touchstart事件手指头触摸屏幕上的事件 2.touchmove... 手指头在屏幕上滑动触发的事件 3.touchend 当手指从屏幕上离开的时候触发利用jquery配合使用方法如下： $("#demoid").bind('touchstart...touchstart、touchmove、touchend三种事件下的鼠标位置点获取：（1）touchstart事件下获取：e.originalEvent.targetTouches[0].pageX

1.5K2 0

【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

1.触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的加和减少,等等 touchstart、touchmove、 touchend 三个事件都会各自有事件对象。...触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素上的手指的一一个列表changedTouches手指状态发生了改变的列表，从无到有，从有到无变化...因为平时我们都是给元素注册触摸事件,所以常用targetTocuhes3.TouchEvent触摸事件对象touches 正在触摸屏幕的所有于指的列衣，targetTouches 正在触摸当前DOM元素的手指列表如果侦听的是一个...DOM元素，他们两个是一样的，changedTouches 手指状态发生了改变的列表从无到有或者从有到无4.拖动元素1.touchstart，touchmove，touchend 可以实现拖动元素2.但是拖动元素需要当前手指的坐标值我们可以使用

5290 0

移动浏览器点击事件的问题

大家都知道移动端的程序中，是没有点击事件的，只有 touchstart、touchmove、touchend。...利用jquery这样写的话，也可以，但是当你点击按钮的单击事件时，将会等待大约300ms的时间。这是因为，浏览器是等着看，如果你是真正执行双击。...如下代码所示,就会延时300ms： $("#sid").click(function(){ console.log(111); }); ps:在移动浏览器端，你会发现，当你点击某个区域的点击事件时...= $('#selectorID'); $selector.on('touchstart touchmove touchend', function(event) { switch(event.type...) { case 'touchstart': falg = false; break; case 'touchmove':

8203 0

移动端touch拖动事件和click事件冲突问题解决

实现效果类似微信里的悬浮窗效果，苹果手机的悬浮球功能效果可以点击拖动，然后吸附在窗口边缘点击悬浮球，可以跳转界面，或者更改悬浮球的形态准备移动端使用 touch事件类型： touchstart...当用户在触摸平面上放置了一个触点时触发（手指放到屏幕上） touchmove当用户在触摸平面上移动触点时触发（手指在屏幕上滑动） touchend当一个触点被用户从触摸平面上移除（抬起手指...实现通过设置悬浮球定位样式，拖动的时候计算坐标，然后动态的修改悬浮球的定位偏移量，结合transtion过渡效果，实现平滑的过渡代码比较简单，就不贴了。...-> touchmove-> touchend 没有拖动行为，事件执行次序为：touchstart-> touchend 从上面的分析来看，我们可以从touchmove 入手，继续往下看解决...在touchmove事件中增加一个是否移动过的标记isMoved: true 在touchend事件中判断isMoved是否为true，是true则按原有逻辑执行，是false则说明没有移动过

2.2K2 0

第134天：移动web开发的一些总结（二）

em：是根据父节点的font-size为相对单位 rem：是根据html的font-size为相对单位 em在多层嵌套下，变得非常难以维护，rem更加能作为全局统一设置的度量那么，rem的基值设置为多少比较好...自定义tao事件原理：在touchstart、touchend的记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短（一般认为是200ms...（原因与300ms有关） tap透传的解决方案： ①使用缓存动画，过渡300ms的延迟 ②中间层dom元素的加入，让中间层接收这个“穿透”事件，稍后隐藏 ③“上下”都使用tap事件，原理上解决tap穿透事件...touchstart：手指触摸屏幕触发（已经有手指放屏幕上不会出发） touchmove：手指在屏幕上滑动，连续触发 touchend：手指离开屏幕时触发 touchcancel：系统取消touch时候触发...对象数组 changeTouches：上次触摸改变的touch对象数组一个小BUG： android只会触发一次touchstart，一次touchmove，touchend不触发。

1.8K1 0

教你实现一个悬浮可拖动并在滑动页面时会自动收缩的vue侧边组件按钮

一、前言实现一个悬浮可拖动且可自定义的一个侧边按钮，在实际的业务开发中可以根据业务需要进行调整效果图最终实现的效果，在移动端收缩时可以加点延时判断增加一下最终的流畅性二、创建组件创建一个div...动态赋值高度、宽度等属性，内部包裹元素我这里用的是一张图片，实际可以根据需要展示不同的内容。...touchmove touchend 获取组件Dom并通过addEventListener为该元素添加触摸事件touchstart touchmove touchend touchstart事件：当手指触摸屏幕时候触发...，即使已经有一个手指放在屏幕上也会触发。...touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。

4.5K4 0

吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

监听事件禁止滑动移动端触摸事件有三个，分别定义为 1. touchstart ：手指放在一个DOM元素上。 2. touchmove ：手指拖曳一个DOM元素。...双层元素叠加时，在上层元素上绑定 touch 事件，下层元素绑定 click 事件。...如果将 click 替换成 touchstart 会怎样？事件触发顺序: touchstart, touchmove, touchend, click。...很容易想象，在我需要touchmove滑动时候，优先触发了touchstart的点击事件，是不是已经产生了冲突呢？所以呢，在具有滚动的情况下，还是建议使用 click 处理。...== scrollParent.scrollTop) { return true; } 主要目的就是，在使用 touchstart 合成 click 事件时，保证其不在滚动的父元素之下。

2.1K2 0

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

DOM元素上一样，我们姑且称之为滚动穿透。...于是在 popup 元素上设置该属性，禁用元素（及其不可滚动的后代）上的所有手势就可以解决该问题了。...大意是说，在 touchstart 和 touchmove 事件中调用 preventDefault 方法可以阻止任何关联事件的默认行为，包括鼠标事件和滚动。因此我们可以这样处理。...Step 1、监听弹窗最外层元素（popup）的 touchmove 事件并阻止默认行为来禁用所有滚动（包括弹窗内部的滚动元素）。...Step 2、释放弹窗内的滚动元素，允许其滚动：同样监听 touchmove 事件，但是阻止该滚动元素的冒泡行为（stopPropagation），使得在滚动的时候最外层元素（popup）无法接收到 touchmove

5271 1

移动端前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 2. touch类事件触摸事件，有touchstart touchmove touchend touchcancel...四种之分 touchstart：手指触摸到屏幕会触发 touchmove：当手指在屏幕上移动时，会触发 touchend：当手指离开屏幕时，会触发 touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候...，可以看到click事件在touchend之后 ?...2) 查看触发的事件对象简单地修改，将事件监听中第三个参数置为true，输出完整的事件对象 addEvent(one, 'tap click touchstart touchmove touchend

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭