移动的 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()
}
移动的 touch事件中的touches、targetTouches和changedTouches的更多相关文章
- touch事件中的touches、targetTouches和changedTouches详解
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触 ...
- touch事件中的touches、targetTouches和changedTouches
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表; 通过一个例子来区分一下 ...
- js中触摸相关变量touches,targetTouches和changedTouches的区别
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前事件的触摸点的列表 通过一个例子来区分一下触摸事件中 ...
- Android 简述touch事件中的MotionEvent
有关touchEvent的事件里都有一个 MotionEvent 參数,以下来简介一下它的属性的一些含义和使用的方法 通常单指操作时,一般例如以下: switch (event.getAction() ...
- touch事件(寻找触摸点 e.changedTouches)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 深入cocos2d-x中的touch事件
深入cocos2d-x中的touch事件 在文章cocos2d-x中处理touch事件中简单讨论过怎样处理touch事件, 那么今天来深入了解下cocos2d-x中是怎样分发touch事件的. 我们最 ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- 移动端笔记——jQuery touch事件
判断移动端还是pc端 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("A ...
- 【Stage3D学习笔记续】山寨Starling(十一):Touch事件体系
我们的山寨Starling版本将会在这里停止更新了,主要还是由于时间比较有限,而且我们的山寨版本也很好的完成了他的任务“了解Starling的核心渲染”,接下来的Starling解析我们将会直接阅读S ...
随机推荐
- 常见的各品牌路由器默认IP地址汇总清单
常见的各品牌路由器默认IP地址汇总清单 下面是各常见品牌路由器的默认IP清单: 如果您使用的设备品牌不在上述列表中,也可以试着访问下RouterIPAddress.com或SetupRouter.co ...
- Scala入门到精通——第十五节 Case Class与模式匹配(二)
本节主要内容 模式匹配的类型 for控制结构中的模式匹配 option类型模式匹配 1. 模式的类型 1 常量模式 object ConstantPattern{ def main(args: Arr ...
- Matlab得到二值图像中最大连通区域
有时候要将二值化图像中最大的连通域保存下来.以下函数提供了一种方法: %function [img]=maxLianTongYu(I):求图像中最大的连通域 %输入:I 输入图像 %输出:img 仅包 ...
- HDU 5090 Game with Pearls(二分匹配)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5090 Problem Description Tom and Jerry are playing a ...
- Linux VM环境配置
1. 直接打 ifconfig ,显示 bash: ifconfig: command not found 打入全路径,查看IP /sbin/ifconfig 2. 主机ping不通虚拟机, ...
- ListView布局之View复用原理举例
1.简单介绍: ListView是android开发中经常使用的控件,系统自带的那些样式,我就不列举了. 今天主要看一下.一个模仿系统历史通话记录的ListView. 效果例如以下: 上面ListVi ...
- 浅析js的函数的按值传递参数
js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响.例如: 'use strict';var list = [1, 2, 3]; list.forEach(f ...
- tiny4412 裸机程序 九、串口排查驱动原因及字符图片显示【转】
本文转载自:http://blog.csdn.net/eshing/article/details/37410571 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 一 ...
- ubuntu安装ruby,安装sass,安装compass
安装ruby apt-get install ruby. 默认会安装1.9的. 不是自己想要的. 可以进行下面的处理. # sudo apt-get install python-software-p ...
- codeforces 949B A Leapfrog in the Array
B. A Leapfrog in the Array time limit per test 2 seconds memory limit per test 512 megabytes input s ...