移动端开发-touch事件及其相关属性
2016-06-04 14:11
369 查看
1. 为什么移动端使用touch事件
习惯在电脑上写js代码的同学可能想问一个问题:为什么移动端要使用touch事件,mouse事件和click事件在手机上不能触发么?其实这个问题很容易解决。首先,这两类事件在移动端也可以触发,但分别有一些问题:移动端会多点触屏,不适合mouse ,而click事件在手机上有 300ms延迟(不是bug)。因此,在移动端绑定事件,最好使用专门为移动端设计的touch事件。2. touch事件介绍
触摸事件有以下几种类型:touchstart,touchmove,touchend这三种用的比较多,还有不常用的touchcancel事件。当然 MDN上还介绍了touchenter,touchleave事件,具体适用的场景及兼容性如何还未做测试,感兴趣的可自行研究。js中不同的事件类型,event对象包含的属性也有所差异。我们先了解几个TouchEvent涉及的对象。
提示:文中的demo都是在 chrome 模拟器,iPhone6s(iOS9.3.2) safari,iOS微信上运行,安卓的兼容性未做测试
Touch
Touch对象代表一个触点,可以通过event.touches[0]获取,每个触点包含位置,大小,形状,压力大小,和目标 element属性。
{ screenX: 511, screenY: 400,//触点相对于屏幕左边沿的Y坐标 clientX: 244.37899780273438, clientY: 189.3820037841797,//相对于可视区域 pageX: 244.37, pageY: 189.37,//相对于HTML文档顶部,当页面有滚动的时候与clientX=Y 不等 force: 1,//压力大小,是从0.0(没有压力)到1.0(最大压力)的浮点数 identifier: 1036403715,//一次触摸动作的唯一标识符 radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径 radiusY: 37.565673828125, rotationAngle: 0,//它是这样一个角度值:由radiusX 和 radiusY 描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面 target: {} // 此次触摸事件的目标element }
identifier
这个属性大家可能有疑惑,使用 Chrome 的模拟器发现多次触摸动作,值始终不变。用真机测试则不会有问题(我这里用的safari连接mac调试)。每次触摸包括start,move,end这整个过程,标志符都不变。下一次触摸动作开始,标志符就会变化。screenY clientY
在 safari 中 screenY与clientY值是相等的,在iOS微信中两个数值不等,但单位应该也不一样。radiusX radiusY rotationAngle
测试过程中safari及微信内置浏览器都不支持这些属性,chrome模拟器可以。
TouchList
由Touch对象构成的数组,通过event.touches取到。一个Touch对象代表一个触点,当有多个手指触摸屏幕时,TouchList就会存储多个Touch对象,前面说到的identifier就用来区分每个手指对应的Touch对象。TouchEvent
TouchEvent就是用来描述手指触摸屏幕的状态变化事件,除了一般DOM事件中event对像具备的属性,还有一些特有的属性。touches
一个TouchList对象,包含当前所有接触屏幕的触点的Touch对象,不论 touchstart 事件从哪个elment上触发。
targetTouches
也是一个TouchList对象,包含了如下触点的 Touch 对象:touchstart从当前事件的目标element上触发
这里大家可能产生了疑惑,这两个对象到底有什么区别?尤其是我们使用chrome模拟器中运行 demo,打印两个对象发现他们其实是一样的。
这两个对象的区别可以类比event.target与event.currentTarget 的区别,如果以前没留意,自行 js 高级程序设计。
touch相关的事件是一个整体,一开始touchstart不可能被触发,则后续touch事件也不会被触发。当然你可以不监听 touchstart 事件,按照操作一 touchmove,touchend 还是可以触发的。
touchend这里要特别注意,touches和targetTouches只存储接触屏幕的触点,要获取触点最后离开的状态要使用changedTouches。
之前也经常用touches[0]来获取Touch 对象,如果知道了 touches,targetTouches,changedTouches 的不同之处。在编写代码时可以更好的选择使用,程序也可以更严谨。
相关文章推荐
- 浅谈javascript的Touch事件
- js实现touch移动触屏滑动事件
- 30分钟搞清楚Android Touch事件分发机制
- Android手势库
- WebApp开发技巧精华总结~1
- 欢迎使用CSDN-markdown编辑器
- 移动端开发 原生touch事件使用
- 移动端开发 原生touch事件使用
- touchesBegan: withEvent:触摸事件传递顺序
- 移动端开发学习1:viewport
- IOS用户事件传递与UIGestureRecognizer的一些思考
- Android中屏幕事件触发和消费流程
- Android Touch事件传递机制
- golang go语言 gomobile 移动端开发笔记
- 手机移动端浏览器touch事件系列详解
- Android Touch事件传递机制解析
- 移动端前端开发注意点
- onInterceptTouchEvent() 和 onTouchEvent()
- Android Touch事件分发机制
- Android Touch事件传递机制全面解析(从WMS到View树)