移动的 touch事件中的touches、targetTouches和changedTouches

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性:

1. 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。

2. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,
targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,
为第二个手指的触摸点,因为第二个手指是引发事件的原因

3. 用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值

4. 手指滑动时,三个值都会发生变化

5. 一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。

6. 手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值,
此值为最后一个离开屏幕的手指的接触点。

2. 触点坐标选取

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
  var e=arguments[0]
  e.preventDefault()
}

原文地址:https://www.cnblogs.com/hngdlxy143/p/9027853.html

时间: 2024-07-31 03:06:30

移动的 touch事件中的touches、targetTouches和changedTouches的相关文章

touch事件中的touches、targetTouches和changedTouches详解

touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性: 1. 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值. 2. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值.当两个手指触摸相同元素时, targetTouches和touches的值相同,否则targetTouches 只有一个值.ch

Android 简述touch事件中的MotionEvent

有关touchEvent的事件里都有一个 MotionEvent 参数,下面来简单介绍一下它的属性的一些含义和使用的方法 通常单指操作时,一般如下: switch (event.getAction()) {//第一个触摸点 case MotionEvent.ACTION_DOWN: //按下 = 0 <span style="white-space:pre"> float x = event.getX();</span> break; case MotionEv

js中触摸相关变量touches,targetTouches和changedTouches的区别

touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性: 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值.当两个手指触摸相同元素时,targetTouches和touches的值相同,否则targetTouches 只有一个值.changedTouche

移动端开发概览【webview和touch事件】

Android vs Ios 我在webkit内核的chrome中进行开发的页面,拿着iPhone和安卓机来进行测试,传说中它们的浏览器内核也是WebKit,那么问题来了,同样的页面为什么在ios中和安卓中表现不同,出现了各种稀奇古怪的bug... 我尝试找下两者的根本区别: - iOS 随着2007年6月29日iPhone的上市,WebKit进入iPhone OS平台,经过Apple的定制,成为iPhone OS平台独一无二的排版引擎: - Android 在旧版本的安卓中: 熟悉Androi

移动端笔记——jQuery touch事件

判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = true; for (var v = 0; v

【Stage3D学习笔记续】山寨Starling(十一):Touch事件体系

我们的山寨Starling版本将会在这里停止更新了,主要还是由于时间比较有限,而且我们的山寨版本也很好的完成了他的任务“了解Starling的核心渲染”,接下来的Starling解析我们将会直接阅读Starling的源码来了解其它的内部运行方式. Touch事件体系无疑是除了核心渲染外最重要的东西了,我们笔记中的Touch事件体系是基于Starling v1.1来解读的. Touch事件体系简介: 在Starling的承继关系里是没有InteractiveObject类,因此所有的显示对象都默认

移动端开发用touch事件还是click事件

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

移动web touch事件

wap中的原生touch 事件,touchstart.touchmove.touchend.touchcancel,这些事件仅仅在移动端才会被触发,在pc端无效 click事件在移动端中具有300ms的延迟,所以为了有更好的用户体验,从以上的touch事件中衍生出另一种比click更快响应的事件称为tap事件,tap事件是被包装过的touch事件(由touchstart以及touchend组成),一般150ms内就会被响应,也就是按下到抬起之间不超过150ms的话,就触发tab事件 以上是自己封

H5_0038:父元素有touch事件,子元素有点击事件,如何实现点击事件

移动端父元素绑定touch事件,子元素绑定click事件 一.问题描述 碰到一个非常头疼的问题,为了做一个滑动效果,给li标签绑定了touch事件.滑动之后,li标签的末尾会出现一个删除按钮,然后点击该删除按钮,删除整个li标签. 看起来没什么问题吧,实际上暗藏杀机啊.给删除按钮绑定点击事件的时候,并没有执行点击事件,而是先执行了父元素,也就是li标签的touch事件. 那怎么解决呢? 最开始想到的是,click事件应该设置成冒泡阶段执行,在设置个阻止冒泡,这样不就不会触发父元素的touch事件