HTML5移动端触摸事件

标签：没有   失效   自定义事件   js库   move   htm   暂停   子集   继承   

一、移动端事件问题

1.click事件300ms延迟问题

2007年第一代iphone发布，移动端Safari首创双击缩放功能，原理是click一次后，经过300ms之后检测是否再有一次click，如果有就会缩放，如果没有则是一个click事件。所以cilck操作会有卡顿感觉。

2.dblclick事件失效

由于双击缩放的存在，移动端的dblclick事件也失效了。

二、移动端触摸事件

• touchstart　　在屏幕上按下手指时触发
• touchmove     在屏幕上移动手指时触发
• touchend        在屏幕上抬起手指时触发
• touchcancel    触点由于某些原因被中断时触发。例如触摸时电话接入或者弹出框，都会中断触摸。一般会在这时暂停游戏、存档等操作。

三、TouchEvent事件对象

TouchEvent继承了UIEvent和Event，事件对象中包含很多内容，这里挑一些常用的：

touches          位于当前屏幕上所有触摸点列表(TouchList对象,包含若干个Touch对象)
targetTouches    起始于当前DOM元素，且没有结束的触摸点列表，是touches的一个严格子集(TouchList对象)
changedTouches   当前事件发生变化的触摸点列表(TouchList对象).对于touchstart,新增加的触点;对于touchmove,和上一次事件比较发生变化的触点(任何一个属性);对于touchend,离开屏幕的触点。
target     触发事件的DOM节点
type       当前事件的类型，如"touchstart"
altKey     布尔值，指明触摸事件触发时，键盘 alt 键是否被按下。
ctrlKey    布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。

每个触摸点（Touch对象）包含了如下属性：

screenX / screenY  触摸点在屏幕中的位置
pageX / pageY      触摸点在整个文档中的位置
clientX / clientY  触摸点在可视区域中的位置
identifier         每个触摸点的唯一标识符
target             该触摸点最开始触摸的dom元素,即触发它的元素，无论触点移动到了哪里，该值都不会改变。
radiusX / radiusY  触摸点大概是一个椭圆，分别为水平轴半径/垂直轴半径(支持不好)
rotationAngle      触摸点旋转角度(顺时针)
force              压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数

四、基于触摸事件的开发

以上的touch事件是HTML标准的内置事件，因为移动端的单双击事件问题和更丰富的用户需求，仅仅依赖原生事件来开发是不够方便的，因此出现了一些自定义事件的库。比如jQuery Mobile库和zeptojs库中的tap类事件（用于代替click事件）和swipe类事件（定义滑动的事件）。我们还可以使用原生事件来自定义更高级的手势，例如双指放大缩小等。

HTML5移动端触摸事件

标签：没有   失效   自定义事件   js库   move   htm   暂停   子集   继承   

原文地址：https://www.cnblogs.com/V587Chinese/p/10202080.html