移动端触屏事件

什么是触屏事件？移动端的触摸产生的一系列行为；

在移动端，原生触摸事件只有以下三种类型，其他所有的触摸事件都是由这三种事件相结合产生的，例如，上划、下滑、左滑、右滑、双击等等；

这三种原生触摸事件为：

touchstart（开始触摸）；

touchmove（触摸过程中）；

touchend（触摸结束）；

另外，还有一个触摸被系统取消的事件：touchcancel（由更高级的事件打断当前正在执行的移动端事件时，会触发该事件，我们可以在这个事件中保存当前相关的触碰事件操作的数据，以保证用户回到页面后接着刚才断开的位置继续操作）；

这里需要注意的是：移动端只能使用addEventListener方式添加事件。

原生触摸事件示例

下面介绍一下触摸事件下的一些相关属性

div.addEventListener('touchstart',function(e){

var touch = e.targetTouches[0];

console.log(touch);

}）；

targetTouches：可获取到事件对象下的触摸点，该属性是一个类数组的结构，同时触发这个事件的手指有几个，则数组中就有几个元素。触摸点的相关坐标数据就存在这些对象中。

pageX\pageY:坐标系原点在页面的左上角；

screenX\screenY:坐标系的原点在屏幕的左上角点（不包含操作系统在左上角的组件）；

clientX\clientY:触摸目标在视口中的坐标，原点在视口左上角(适口视用来展示html代码的容器)；

targer:保存的是触发事件的标签，使用事件委托时可以通过该属性获取到触发该事件的标签对象；

identifier:ID值，唯一标示了手指触摸点，如果手指在屏幕上产生移动（如果有多个触摸点，则可以根据这个id值跟踪对应的触摸点）；

下面我们结合原生的触摸事件，来实现，判断触摸是向左还是向右：

左滑打印“左”，右滑打印“右”，并且每次滑动都会打印出“触摸开始”和“触摸结束”

其实在实际开发过程中，我们大多使用第三方类库来实现移动端触屏事件，使用起来快捷方便，大大提高了开发效率；通常使用zepot模块的touch.js，自认为zepot模块是一个非常强大，且功能齐全的第三方类库，Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。下面提供一个连接，大家可以学习学习，需要注意的是，要想使用zipto的touch类库，要单独对touch进行下载：

网站连接：www.css88.com/doc/zeptojs_api/

移动端触摸事件介绍到这里，如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！