web移动端开发中常用的三个事件,现在的智能机都是触屏操作.所以触摸在移动端的开发中几乎无处不在,下面介绍移动开发中常用的几个事件
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend事件：当手指从屏幕上离开的时候触发touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明
(touchcancel事件简单的说是在移动端发生了触摸中断，一般情况下就是优先级比当前活动更高的事件时，才会触发的。比如正在看新闻，手指滑动屏幕的时候，突然来电话，直接中断了触摸事件，跳转到了通话，页面此时就触发了touchcancel事件。这个事件不容易在浏览器的模拟器中模拟，之前我在用电脑的任务栏切换的时候，受到启发，可以试试在浏览器模拟器触摸的同时，按下键盘上的Alt+Tab键，果然触发了touchcancel事件，有兴趣的小伙伴可以试一下。)
这几个事件都会冒泡,也可以取消,虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
以上三个对象都包含一下属性
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标
代码演示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>web移动端的事件</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; } body { min-width: 320px; max-width: 732px; height: 1000px; margin: 0 auto; border: 1px red solid; } #box { width: 50%; height: 200px; background-color: lightgrey; } </style> </head> <body> <div class="container"> <div id="box"></div> </div> <script> var boxObj=document.getElementById('box'); // // 添加事件 // boxObj.addEventListener('touchstart',function(e){ // console.log('start'); // console.log(e); // }); // // boxObj.addEventListener('touchmove',function(e){ // console.log('move'); // // console.log(e); // }); // // boxObj.addEventListener('touchend',function(e){ // console.log('end'); // console.log(e); // }) /*==========封装手势事件函数===========*/ /** * * @param dom 滑动的元素 * @param leftCallBack 向左滑动的回调函数 * @param rightCallBack 向右滑动的回调函数 */ var bindSwipeEvent = function(dom,leftCallBack,rightCallBack){ var isMove=false;//判断是否在滑动 var startX = 0;//记录滑动开始的位置 var distanceX=0;//记录移动的距离 dom.addEventListener('touchstart',function(e){ //这个事件主要是用来获得 滑动开始的点的位置 startX=e.touches[0].clientX; }); dom.addEventListener('touchmove',function(e){ isMove=true; var moveX = e.touches[0].clientX;//此时移动到的位置的水平距离 distanceX=moveX-startX; }); dom.addEventListener('touchend',function (e) { if(isMove&&Math.abs(distanceX)>50){//当滑动的距离大于50时 才能执行相应的功能 if(distanceX>0){//向右滑动 rightCallBack&&rightCallBack.call(this,e);//改变this的指向 }else{//向右滑动 leftCallBack&&leftCallBack.call(this,e); } } }); //重置参数 isMove=false;//判断是否在滑动 startX = 0;//记录滑动开始的位置 distanceX=0;//记录移动的距离 }; //调用函数 bindSwipeEvent(boxObj,function(){ console.log('向左滑动'); },function () { console.log('向右滑动') }) </script> </body> </html>
