挪动端 Touch 事宜的运用与思索（1）

2024年4月5日 228次阅读 来源: 云贤力

本文重要引见 TouchEvent 相干的一些对象与属性如 Touch, TouchList, touhces, targetTouches 等，以及运用的注重点和误区。

触摸事宜有以下几种范例：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 高等顺序设计。

我们先看一个 demo2，来相识 touch 事宜的特征。
在线编辑： http://jsrun.net/3XKKp
预览地点： http://jsrun.net/rtd/3XKKp

人人举行以下两个操纵，视察控制台发明了什么？
操纵一：一根手指触摸蓝色box，并滑动，继承滑动出蓝色box
操纵二：一根手指触摸非蓝色box地区，然后逐步滑动到蓝色box

人人会发明：操纵一中纵然滑出蓝色box，而touchmove，touchend事宜会继承触发，touches,targetTouches存储着雷同的 Touch 对象，touchmove事宜的目的元素仍然是box。
操纵二中相干的 touch 事宜都不会触发。很奇异的是 touchmove 事宜，明显在 box 上滑动，却不会触发 touchmove 事宜。

我们可以猜想，touch相干的事宜是一个团体，一最先touchstart不能够被触发，则后续touch事宜也不会被触发。固然你可以不监听 touchstart 事宜，根据操纵一 touchmove，touchend 照样可以触发的。

再看下面这个demo2
在线编辑：http://jsrun.net/XXKKp
接见地点：http://jsrun.net/rtd/XXKKp

这里我们对白色地区body也添加了 touch 事宜的监听，继承上述 demo1中的两个操纵。
我们可以发明：

操纵一可以发明：touch 相干的事宜可以冒泡，触发了 box,body的touch事宜。操纵二只能触发 body 的touch 事宜，和demo1同理。

我们可以视察下操纵一的两个对象TouchEvent.targetTouches,TouchEvent.touches，无论是box照样body触发的 touch 事宜，他们的存储的 Touch对象都是雷同的，而且 target 都是 box。
接下来举行操纵三：

用两根手指，一根手指触摸蓝色box，另一根触摸白色地区，然后滑动。

然后再次比较下targetTouches和touches，就可以发明他们的差别。

changedTouches

也是一个 TouchList 对象，关于 touchstart 事宜, 这个 TouchList 对象列出在此次事宜中新增添的触点。关于 touchmove 事宜，列出和上一次事宜相比较，发生了变化的触点。关于 touchend ，列出脱离触摸平面的触点（这些触点对应已不打仗触摸平面的手指）。

touchend这里要特别注重，touches和targetTouches只存储打仗屏幕的触点，要猎取触点末了脱离的状况要运用changedTouches。

之前也经经常使用touches[0]来猎取Touch 对象，假如知道了 touches，targetTouches,changedTouches 的差别之处。在编写代码时可以更好的挑选运用，顺序也可以更严谨。

续篇想研讨的题目：

  1. touchmove的触发频次题目

  2. 怎样剖断用户是疾速滑动(swipe事宜)

  3. 怎样完成Tap

  4. 一些运用总结或最好实践

参考资料

文中如明白有误，还请多多指出！

    原文作者：云贤力
    原文地址: https://segmentfault.com/a/1190000005609334
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞