移动端touch事件获取clientX, clientY

最新推荐文章于 2022-08-07 13:51:41 发布
最新推荐文章于 2022-08-07 13:51:41 发布
阅读量2.5w 收藏 6
点赞数 4
分类专栏： javascript 文章标签： jquery ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fudesign2008/article/details/7795122
版权
目有个交互需要实现手指滑动的交互，pc端使用mousedown,mousemove,mouseup监听实现。

但在ios设备上mousemove是不好监听的，同类的方法是touchstart,touchmove,touchend。

如何获取手指滑动时的坐标位置呢?

直接使用event.clientX是不起作用的，要使用event.changedTouches[0].clientX才好,

如果是jquery的event对象，使用event.originalEvent.changedTouches[0].clientX。

FuDesign2008
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
手机端--1.手指拖动touchmove，e.touches[0].clientX
w3cgirl-赵娜的播客
11-19 5639
案例： 图片可以随着手指的拖动  而  变动 1.e.touches[0].clientX  手指横坐标 2.  最后所求  ：  nowX, nowY  图片的横纵坐标    nowX =   手指横坐标  -    误差 3.   已知条件：  误差 deltaX = 手指横坐标 -  nowX  (一开始给个初始值)  deltaX   固定   手指初始按下   与  手指移动的过...
JS 键盘事件、触摸事件
boonyaxnn的博客
04-10 464
一、键盘事件：指当用户在操作键盘的时候会自动被触发的事件 keydown:键盘按下时触发 keypress:键盘按下时触发 功能键无法响应 keyup: 键盘抬起时触发 注意： 1.keydown keypress 按下不放一直触发； 2.keypress无法触发功能键 3.keypress无法捕获组合键 4.keypress 可以区分大写字母和小写字母 5.keydown 可以区分小键盘上...
手机端html5自动调用touch事件,移动端中touch事件的详解
weixin_42565971的博客
06-04 475
本篇文章给大家带来的内容是关于移动端中touch事件的详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.touchstart当手指触碰屏幕时候触发dom.addEventListener('touchstart',function(e){});startX=e.touches[0].clientX;事件返回的e对象包含的移动端特有的属性：tarchTouches:目标元素的所...
uniapp上下滑动事件
qq_34631220的博客
06-08 3878
uniapp上下滑动事件
触摸事件(touchstart、touchmove和touchend)
热门推荐
weixin_42349568的博客
10-23 2万+
触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明： 　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。 　　touchend事件：当手指从屏幕上离开的时候触发。 除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。也就是存在于事件的默认参数event中。 　　touches：表示当前跟踪的触摸操作的touch对象的数组。
vue自定义移动端touch事件，点击、滑动、长按事件
09-30
在移动设备上，为了实现与用户的交互，Vue.js 提供了一套基于原生 JavaScript `touch` 事件的自定义事件处理机制。Vue 的 touch 事件处理使得开发者可以在移动端项目中轻松实现点击、滑动和长按等操作。下面我们将...
touch:轻量级移动端触摸手势库
06-15
displacementY.screenX事件发生时手指触摸位置距离屏幕左上角的X方向(水平)距离.screenY事件发生时手指触摸位置距离屏幕左上角的Y方向(竖直)距离.clientX事件发生时手指触摸位置距离浏览器网页显示区域左上角的X方向...
js实现适配移动端的拖动效果
10-15
cur.x = touch.clientX; cur.y = touch.clientY; dx = div2.offsetLeft; dy = div2.offsetTop; } ``` 2. `touchmove`事件：当用户在屏幕上移动手指时触发，用于更新`div2`的位置。计算当前触碰点相对于初始触碰...
javascript移动设备Web开发中对touch事件的封装实例
12-09
然而，像Zepto这样的轻量级库，尽管在移动端广泛使用，它们的touch模块在处理一些特定手势时可能会遇到兼容性问题。因此，对于开发人员来说，自定义封装touch事件以适应各种设备和浏览器就显得尤为必要。 **Tap事件...
javascript实现移动端触屏拖拽功能
10-15
我们在此事件中获取到触摸点相对于`div1`的初始坐标`oL`和`oT`，并添加一个`touchmove`事件监听器，以防止默认的滚动行为。 ```javascript div1.addEventListener('touchstart', function(e) { var ev = e || ...
html移动端触摸事件,移动端——touch事件
weixin_42386819的博客
06-08 548
1.touchstart当手指触碰屏幕时候触发dom.addEventListener('touchstart',function(e){});startX=e.touches[0].clientX;事件返回的e对象包含的移动端特有的属性：targetTouches :目标元素的所有当前触摸changedTouches:页面上最新更改的所有触摸touches: 页面上所有的触摸2.touchmov...
uni-app屏幕实现左右上限滑动事件判断
紫微斗数学习交流
05-25 632
<template> <view class="text-area" @touchstart="start" @touchend="end"> </view> </template> <script> export default { data() { return { startData: { clientX:null, clientY:null, }, } }, onLoad(
移动端——touch事件
weixin_34159110的博客
09-03 105
1.touchstart 当手指触碰屏幕时候触发 dom.addEventListener('touchstart',function(e){}); startX=e.touches[0].clientX; 事件返回的e对象包含的移动端特有的属性： targetTouches :目标元素的所有当前触摸 changedTouches:页面上...
vue 移动端签字_vue使用canvas实现移动端手写签名
weixin_39716703的博客
12-19 339
基于vue使用canvas实现移动端手写签名！之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。HTML部分：请输入您的签名7：Canvas画板 重写保存签名为了节约时间，样式写的比较简单。凑合看吧！script部分var draw;var ...
滚动穿透的解决方案
Shadow_Weirdo
03-21 250
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。 而且经常是你在pc模拟器上没有问题，但是真机打开就一定会出现。 方案：body滚动 + 弹层内部滚动[js-检测touchmove的target] 简单粗暴，一针见血：谁能动谁动，谁不能动就禁止to...
移动端无法获取event.clientX和event.clientY的解决办法
zzxboy1的博客
03-24 5877
最近在制作一个实现类似于手机的锁屏手势密码效果的页面时，由于需要应用获取canvas中，手指划过的位置，于是遇到了一些小问题。 众所周知，在PC端，我们通常用event.clienX或者event.clientY来获取手指的坐标，可是在移动端，打开开发者模式，调试touch事件时，这一值通过console.log始终返回是undefined。通过查询，我发现了TouchEvent里面有touche
touch事件中的touches、targetTouches和changedTouches详解
weixin_40660141的博客
03-04 1587
想要封装个tap事件，开始接触移动端，就知道移动端touch有三个触发事件 touchstart：触摸开始的时候触发 touchmove：手指在屏幕上滑动的时候触发 touchend：触摸结束的时候触发。 但是，从未深入研究过这三个玩意，本以为知识点到此为止的，原来还有深入。 而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）： touches：当前位于屏幕...
微信小程序左滑删除
m0_60643169的博客
04-01 424
<scroll-view scroll-y enable-back-to-top style="height:{{ scrollHeight }}px" > <view> <block wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="index" > <view class="list {{ item.isTouchMove ? .
判断鼠标或touchmove事件是否离开当前元素，比如做语音发送，离开取消
m0_50663823的博客
08-07 477
判断鼠标或touchmove事件是否离开当前元素，比如做语音发送，离开取消
实现移动端touch事件的横向滑动列表效果并循环展示
最新发布
05-14
实现移动端touch事件的横向滑动列表效果并循环展示的一种常见方法是使用CSS3的transform属性和JavaScript的Touch事件。 首先，创建一个容器 div，设置其宽度为视口宽度的倍数，如 300%。在容器内部创建多个 div 元素，分别放置需要展示的内容。 然后，通过CSS3的transform属性将容器的位置移动到第二个或第三个 div 元素的位置，使得第一个 div 元素在视口外不可见。 接下来，使用JavaScript监听Touch事件，根据手指在屏幕上的移动距离，通过改变容器的transform属性来实现横向滑动效果。同时，当容器滑动到最后一个 div 元素时，将其位置移动到第一个 div 元素的位置，实现循环展示的效果。 下面是一个实现横向循环滑动列表效果的示例代码： HTML： ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> ``` CSS： ```css .container { width: 300%; display: flex; transition: transform 0.3s ease-in-out; } .item { flex-basis: calc(100% / 3); text-align: center; font-size: 30px; } ``` JavaScript： ```js var container = document.querySelector('.container'); var startX, startY, moveX, moveY, distanceX, distanceY; container.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }); container.addEventListener('touchmove', function(e) { moveX = e.touches[0].clientX; moveY = e.touches[0].clientY; distanceX = moveX - startX; distanceY = moveY - startY; if (Math.abs(distanceX) > Math.abs(distanceY)) { e.preventDefault(); container.style.transform = 'translateX(' + (-100 / 3 + distanceX / window.innerWidth * 100) + '%)'; } }); container.addEventListener('touchend', function(e) { if (distanceX > 0 && Math.abs(distanceX) > window.innerWidth / 5) { container.style.transform = 'translateX(' + (-200 / 3) + '%)'; } else if (distanceX < 0 && Math.abs(distanceX) > window.innerWidth / 5) { container.style.transform = 'translateX(' + '0' + '%)'; } else { container.style.transform = 'translateX(' + (-100 / 3) + '%)'; } }); container.addEventListener('transitionend', function() { if (container.style.transform === 'translateX(' + (-200 / 3) + '%)') { container.style.transition = 'none'; container.style.transform = 'translateX(' + (-100 / 3) + '%)'; setTimeout(function() { container.style.transition = 'transform 0.3s ease-in-out'; }, 0); } else if (container.style.transform === 'translateX(' + '0' + '%)') { container.style.transition = 'none'; container.style.transform = 'translateX(' + (-100 / 3 * 2) + '%)'; setTimeout(function() { container.style.transition = 'transform 0.3s ease-in-out'; }, 0); } }); ``` 在这个示例中，我们使用了Flex布局和CSS3的calc()函数来创建了一个横向排列的列表。Touch事件监听了用户的滑动操作，通过改变容器的transform属性来实现横向滑动效果。当滑动到最后一个 div 元素时，通过修改transform属性实现循环展示的效果。同时，我们还添加了一些防抖和节流的优化，使得滑动效果更加流畅。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值