touch事件解析

原创 greenhand 随笔 JavaScript 323阅读 2018-01-10 11:23:34 举报

touch事件解析

touch事件解析

MDN上这样解释的

touchstart:当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element
touchend:当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。事件的目标 element 和这个 touchend 事件对应的 touchstart 事件的目标 element 相同,哪怕 touchend 事件触发时,触点已经移出了该 element 。已经被从触摸平面上移除的触点,可以在 changedTouches 属性定义的 TouchList 中找到。
touchmove:当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同,哪怕当 touchmove 事件触发时,触点已经移出了该 element 。当触点的半径、旋转角度以及压力大小发生变化时,也将触发此事件。
注意: 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率
touchcancel:当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):
由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。
触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。
当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch 对象被取消。

TouchEvent.changedTouches(只读):一个TouchList 对象,包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象。
TouchEvent.targetTouches(只读):一个TouchList 对象,是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element(即监听事件的元素)上,并且仍然没有离开触摸平面的触点
TouchEvent.touches(只读):一个TouchList 对象,包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化。

触点id—Touch.identifier
此 Touch 对象的唯一标识符. 一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. 只读属性.

html 代码

根据上面的代码,做如下操作:
1:放一个手指(取名手指1)在第一个section(section1)上
2:放另一个手指(取名手指2)在第二个section(section2)上
3:滑动手指2到section1的区域(手指1不动)
4:松开第手指2
5:松开手指1

按照标准,事件流程应该如下
步骤1只触发section1的touchstart事件,touches、targetTouches、changedTouches相同,都包含手指1的触点
步骤2只触发section2的touchstart事件,touches包含手指1、2的触点,targetTouches和changedTouches只包含手指2的触点
步骤3只触发section2的touchmove事件(并不会触发section1的touchmove事件,对于同一个触点,touchstart是在哪个元素上触发的,touchmove和touchend就只在这个元素上触发。即使该触点滑动到了其他元素上,也不会触发其他元素的touch事件),touches包含手指1、2的触点,targetTouches和changedTouches只包含手指2的触点
步骤4只触发section2的touchend事件,touches只包含手指1的触点,targetTouches为空,changedTouches只包含手指2的触点
步骤5只触发section1的touchend事件,touches和targetTouches都为空,changedTouches只包含手指1的触点

手机chrome和手机uc浏览器测试如下,遵循标准,各事件中的touches、targetTouches、changedTouches都与标准流程一致

touch事件解析

而vivo浏览器touchstart、touchend事件正常,touchmove事件异常,结果如下。步骤3中不管手指2有没有滑动到section1中,都会触发section1的touchmove事件,而且changedTouches中包含了手指1和手指2的触点。感觉像是滑动手指2时,浏览器认为手指1也在滑动(虽然touchmove打印出来的手指1的触点坐标并没有变。。。),不然changedTouches中怎么会有两个触点。。。

touch事件解析

touch事件解析

评论 ( 2 )
最新评论