targetTouches、touches、changedTouches的具体区别

最新推荐文章于 2021-05-15 16:42:15 发布
最新推荐文章于 2021-05-15 16:42:15 发布
阅读量1k 收藏 1
点赞数

targetTouches、touches、changedTouches的具体区别

  • touches: 当前屏幕上所有触摸点的集合列表
  • targetTouches:  绑定事件的那个结点上的触摸点的集合列表
  • changedTouches:  触发事件时改变的触摸点的集合

举例来说，比如div1, div2只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch，然后，再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。

为了方便记忆，做了个图：

touch

swordguy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js左右滑屏
06-27
js的左右滑动触屏事件(2012-01-20 08:55:53)转载▼标签： 移动设备触屏事件杂谈 分类： js js的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。 touchstart在触摸开始时触发事件 touchend在触摸结束时触发事件 touchmove这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 1.5 中，在 touchstart 激发后激发一次，然后剩余的都和 touchend 差不多同时激发。 这三个事件都都有一个 timeStamp 的属性，查看 timeStamp 属性，可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。 下面是一段代码实例： document.getElementsByTagName_r('body')[0].addEventListener('touchstart', function (e) { nStartY = e.targetTouches[0].pageY; nStartX = e.targetTouches[0].pageX; }); document.getElementsByTagName_r('body')[0].addEventListener('touchend', function (e) { nChangY = e.changedTouches[0].pageY; nChangX = e.changedTouches[0].pageX; PS:1.touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好，已经把这个问题完美的避免掉了。 2.注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。 附上苹果官方的事件文档。http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html
touch事件中的touches、targetTouches和changedTouches详解
weixin_38170829的博客
10-27 684
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性： 1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手...
移动touch事件之一
weixin_33941350的博客
01-04 56
触摸事件分类： touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。 touchend:当手指从屏幕上移开时触发。 touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。 事件event对象上的...
学习笔记：移动端事件
z591391960的博客
05-18 151
移动端事件学习笔记 分类： 触摸事件 touch事件 pointer事件，就是集合touch事件和PC点击事件 手势事件，多个手指头触点事件 传感器事件，设备硬件传感 touch事件 touchstart：手指触摸开始时候回调 touchmove：手指触摸移动时候回调 touchend：手指触摸结束时候回调 IE8以上可以使用addEventListener监听： addEventListener('touchstart', callback, false);// 冒泡监听 touch e
Touch事件详解及区别，触屏滑动距离计算
weixin_30827565的博客
03-06 236
移动端有四个关于触摸的事件，分别是touchstart、touchmove、touchend、touchcancel（比较少用）, 它们的触发顺序是touchstart-->touchmove-->touchend-->click，所以touch事件触发完成后会接着触发click事件，需要注意一下 ，阻止一下事件冒泡就可以了。touch事件可以产生一个event对象，这个eve...
【移动端】事件（touchstart、touchmove、touchend、touchcancel）跟事件对象属性（changedTouches、targetTouches、touches）
马云
01-18 1018
文章目录事件事件类型事件绑定事件对象属性在touchstart 事件中在 touchmove 事件中在 touchend 事件中 事件 事件类型 touchstart 元素上触摸开始时触发 touchstart 事件可用于元素触摸的交互，比如页面跳转，标签页切换 touchmove 元素上触摸移动时触发 touchmove 事件可用于页面的滑动特效，网页游戏，画板 touchend 手指从元素上离开时触发 touchend 事件主要跟 touchmove 事件结合使用 touchcanc
移动端事件应用之targetTouches
weixin_46513664的博客
03-25 956
一、移动端块的移动 二、移动端方向锁定 一、移动端块的移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
linux屏幕触碰事件,touch事件中的touches、targetTouches和changedTouches详解
weixin_34381648的博客
05-15 927
touches: 当前屏幕上所有触摸点的列表;targetTouches: 当前对象上所有触摸点的列表;changedTouches: 涉及当前(引发)事件的触摸点的列表通过一个例子来区分一下触摸事件中的这三个属性：1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，target...
移动端前端常见的触摸事件（touch类事件）
m0_56174822的博客
05-12 2692
touch类事件 触摸事件，有touchstart touchmove touchend touchcancel 四种之分 touchstart：手指触摸到屏幕会触发 touchmove：当手指在屏幕上移动时，会触发 touchend：当手指离开屏幕时，会触发 touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件 由于手机端的手指触发不是单个的，所以在event里面生成的与触摸有关的数据都是以数组的.
js中触摸相关变量touches,targetTouches和changedTouches的区别
weixin_33921089的博客
07-05 253
touches:当前屏幕上所有触摸点(手指)的列表; targetTouches:当前DOM元素上所有触摸点(手指)的列表; changedTouches:涉及当前事件的触摸点(手指)的列表 通过一个例子来区分一下触摸事件中的这三个属性： 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点...
dragM:移动端的拖拽框架
05-17
3.关于元素坐标获取不适用之前的clientX(clientY),采用新的targetTouches[0].pageX(targetTouches[0].pageY) 4.拖拽之后需要执行事件解绑removeEventListener 5.*因为在做移动端的时候用zepto，当在$(function(){})...
滑动出菜单
12-01
var x = e.targetTouches[0].pageX - obj.state.mouseX; var y = e.targetTouches[0].pageY - obj.state.mouseY; if(x>10){ glideNav(true); }else if(x){ glideNav(false); } }); document....
JS手机端touch事件计算滑动距离的方法示例
11-29
分享给大家供大家参考，具体如下： 计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下： function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body");...
Yangkro#javascript-#移动端的DOM操作和事件对象1
07-25
部分事件对象如下：touches 正在触摸屏幕的所有手指的一个列表当我们手指离开屏幕就没有了targetTouches 正在触摸当前DOM元素上的手指的一个列表
Markdown学习笔记
04-30
Markdown学习笔记
热塑性弹性体，全球前21强生产商排名及市场份额.docx
04-30
热塑性弹性体，全球前21强生产商排名及市场份额
配合eclipse svn插件subclipse-4.3.4版本的javahl
04-30
配合eclipse svn插件subclipse-4.3.4版本的javahl，将其中的features和plugins目录解压到与subclipse-4.3.4插件同一目录下即可。在eclipse 4.31版本上验证有效。
一个基于epoll的多线程 linux c http web服务器.zip
最新发布
04-30
一个基于epoll的多线程 linux c http web服务器.zip
Bash脚本教程：优雅地管理Java应用.zip
04-30
本Bash脚本用于自动化管理Java JAR应用的启动、停止及监控。首先检查JAR进程是否在运行，如在运行则安全终止。随后，使用预设的Java参数启动JAR文件，并将输出和错误日志重定向至日志文件。启动后，脚本持续监控JAR进程状态，确保其在预设时间内成功启动。本脚本提供了灵活的配置和错误处理机制，为Java应用的运维管理带来了便捷与可靠性。
touchstart会传值嘛
06-06
TouchEvent对象有三个属性，分别是touches、targetTouches和changedTouches。其中： - touches：表示当前屏幕上的所有触摸点的列表。 - targetTouches：表示当前元素上的所有触摸点的列表。 - changedTouches：表示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值