h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件

移动端滑屏 touch事件

移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛，类似于PC端的图片轮播，但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

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

page2

page3

page4

page5

page6

CSS样式结构为：

/* 注意加html标签，使得高度100%等于视窗高度 */

html,body{ width:100%; height:100%; margin:0; padding:0; overflow:hidden; }

/*滑动页面的统一样式 */

.pages{ width: 100%; height: 100%; position: relative; }

.page { font-size:100px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hid