touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove: //在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend: //从屏幕上移开时触发。
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表。

touches：//表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时，event.touches.length=1,

当两个手指在触屏上时，event.touches.length=2，以此类推。

targetTouches：//特定于事件目标的touch对象数组。因为touch事件是会冒泡的，所以利用这个属性指出目标对象。
changedTouches：//表示自上次触摸以来发生了什么改变的touch对象的数组。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX：//触摸目标在视口中的x坐标。
clientY：//触摸目标在视口中的y坐标。
identifier：//标识触摸的唯一ID。
pageX：//触摸目标在页面中的x坐标。
pageY：//触摸目标在页面中的y坐标。
screenX：//触摸目标在屏幕中的x坐标。
screenY：//触摸目标在屏幕中的y坐标。
target：//触摸的DOM节点目标。

注意事项：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

加上这句代码后，我们编写的页面将不会随着用的手势而放大缩小。

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。

这里写的demo的使用的方法是将HTML结构写好后往里传参就可以了。它接受所有滑动页面对象(在这里是document.querySelector('#pages') ) 和要设定的方向(用X,Y表示横向或者纵向)以及一个可选的扩展函数。

纵向滑屏案例：

这里将所有的代码都封装进一个PageSlide的原型对象中，可以当成原生JS插件来使用，

它所要求的HTML的结构为：

page1