touch事件笔记
来源:互联网 发布:ipad的蜂窝移动数据 编辑:程序博客网 时间:2024/04/30 12:12
touch事件
touch事件可以分为单点触摸和多点触摸两种,单点触摸高端机一般都支持,Safari2.0、Android3.0以上的版本支持多点触摸,
支持最多5个手指同时触摸屏幕,ipad最多支持11个手指同时触摸屏幕,
我们可以采用以下的事件模型捕获这些事件,
touchstart touchmove touchend touchcancel
当用户按下手指在屏幕上,touchstart会被触发,
当用户移动一个或多个手指的时候,touchmove会被触发,
当用户移走手指, touchend被触发。
那什么时候触发touchcancel呢?当一些更高级别的事件发生的时候,
例如,alert,有电话打来或者有 推送的消息提示的时候会取消当前的touch操作,即触发 touchcancel。
当你在开发一个web game的时候,
touchcancel 对你很重要,
你可以在 touchcancel 触发的时候暂停游戏或者保存游戏。
gesture事件
gesture事件的运行原理与touch事件相同,只是gesture事件仅当屏幕上存在至少两个手指时触发,所以Safari2.0、Android3.0以上版本支持, 手势具备诸多优势,可以帮助我们测量两指放缩和旋转操作,事件模型如下,
gesturestart gesturechange gestureend
事件属性
无论使用触摸还是手势事件,你都需要将这些事件转换为单独的触摸来使用它们。为此,你需要访问事件对象的一系列的属性。
targetTouches 目标元素的所有当前触摸
touches 页面上的所有触摸
changedTouches 页面上最新更改的所有触摸
changedTouches、targetTouches和touches分别包含稍微不同的触摸列表。targetTouches和touches分别包含当前位于 屏幕上的手指列表,但changedTouches仅列出最后发生的触摸。如果你在使用touchend或者gestureend事件,那么这个属性 非常重要。在这两种情况下,屏幕上都不会再出现手指,因此targetTouches和touches应该为空,但你仍然可以通过查看 changedTouches数组来了解最后发生的事情。
由于触摸属性都会生成数组,因此你可以使用JavaScript数组函数来访问它们。这意味着,event.touches[0]将返回第一次 触摸,并且可以使用event.touches.length来计算当前存储的触摸数量。
查看单独触摸时,通过使用event.targetTouches[0],你也可以访问其它触摸,每个触摸会包含一些具体信息,
clientX、clientY 相对于当前屏幕的X或Y位置
pageX、pageY 相对于整体页面的X或Y位置
screenX、screenY 相对于用户计算机屏幕的X或Y位置
identifier 事件的唯一标识符 target 生成触摸的目标对象
手势事件的事件对象会比普通触摸事件多两个属性,
rotation 手指的旋转角度 scale 放缩的值
touch事件可以分为单点触摸和多点触摸两种,单点触摸高端机一般都支持,Safari2.0、Android3.0以上的版本支持多点触摸,
支持最多5个手指同时触摸屏幕,ipad最多支持11个手指同时触摸屏幕,
我们可以采用以下的事件模型捕获这些事件,
touchstart touchmove touchend touchcancel
当用户按下手指在屏幕上,touchstart会被触发,
当用户移动一个或多个手指的时候,touchmove会被触发,
当用户移走手指, touchend被触发。
那什么时候触发touchcancel呢?当一些更高级别的事件发生的时候,
例如,alert,有电话打来或者有 推送的消息提示的时候会取消当前的touch操作,即触发 touchcancel。
当你在开发一个web game的时候,
touchcancel 对你很重要,
你可以在 touchcancel 触发的时候暂停游戏或者保存游戏。
gesture事件
gesture事件的运行原理与touch事件相同,只是gesture事件仅当屏幕上存在至少两个手指时触发,所以Safari2.0、Android3.0以上版本支持, 手势具备诸多优势,可以帮助我们测量两指放缩和旋转操作,事件模型如下,
gesturestart gesturechange gestureend
事件属性
无论使用触摸还是手势事件,你都需要将这些事件转换为单独的触摸来使用它们。为此,你需要访问事件对象的一系列的属性。
targetTouches 目标元素的所有当前触摸
touches 页面上的所有触摸
changedTouches 页面上最新更改的所有触摸
changedTouches、targetTouches和touches分别包含稍微不同的触摸列表。targetTouches和touches分别包含当前位于 屏幕上的手指列表,但changedTouches仅列出最后发生的触摸。如果你在使用touchend或者gestureend事件,那么这个属性 非常重要。在这两种情况下,屏幕上都不会再出现手指,因此targetTouches和touches应该为空,但你仍然可以通过查看 changedTouches数组来了解最后发生的事情。
由于触摸属性都会生成数组,因此你可以使用JavaScript数组函数来访问它们。这意味着,event.touches[0]将返回第一次 触摸,并且可以使用event.touches.length来计算当前存储的触摸数量。
查看单独触摸时,通过使用event.targetTouches[0],你也可以访问其它触摸,每个触摸会包含一些具体信息,
clientX、clientY 相对于当前屏幕的X或Y位置
pageX、pageY 相对于整体页面的X或Y位置
screenX、screenY 相对于用户计算机屏幕的X或Y位置
identifier 事件的唯一标识符 target 生成触摸的目标对象
手势事件的事件对象会比普通触摸事件多两个属性,
rotation 手指的旋转角度 scale 放缩的值
阅读全文
0 0
- touch事件笔记
- Android Touch事件分发笔记
- JavaScript笔记(touch事件)
- 事件组件sencha touch 学习笔记
- Sencha Touch学习笔记(五)事件
- iOS学习笔记-----UIView的Touch事件
- TOUCH事件
- touch事件
- Touch事件
- touch事件
- touch事件
- touch事件
- Touch事件
- touch事件
- touch事件
- touch事件
- touch事件
- Touch事件
- vim编辑二进制文件
- BZOJ 4519 [Cqoi2016]不同的最小割 最小割树(分治最小割)
- base64编码详解
- yii2下action下直接返回图片给浏览器
- GoogleTest测试框架
- touch事件笔记
- Linux内核分析
- 用 Pipeline 将训练集参数重复应用到测试集
- LOJ 6032 「雅礼集训 2017 Day2」水箱
- 2017.6.27DI/DO测试总结
- 【JZOJ5167】下蛋爷
- Spring cloud
- Scala练习-直接插入排序
- c语言中全局变量重定义