一、移动端的操作方式和PC端是不同的，移动端主要是用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：
1、手指放到屏幕上时触发 touchstart
2、手指放在屏幕上滑动式触发 touchmove
3、手指离开屏幕时触发。 touchend
4、系统取消touch事件的时候触发，比较少用。 touchcancel
每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：
touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
changedTouches //涉及当前事件的所有手指的列表
每个事件有列表，每个列表还有以下属性：
其中坐标常用pageX,pageY：
pageX //相对于页面的 X 坐标
pageY //相对于页面的 Y 坐标
clientX //相对于视区的 X 坐标
clientY //相对于视区的 Y 坐标
screenX //相对于屏幕的 X 坐标
screenY //相对于屏幕的 Y 坐标
identifier // 当前触摸点的惟一编号
target //手指所触摸的 DOM 元素
其他相关事件：
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动
var supportTouch = "createTouch" in document //判断是否支持触摸事件
二、移动端一般有三种操作：点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，也可以使用封装成熟的js库
| <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>无标题文档</title> <style> div{width:100px;height:100px;line-height:100px;margin-bottom:10px;background:red;text-align:center;color:#fff;} </style> <script> /*** @name:触屏事件 @param {string} element dom元素 {function} fn 事件触发函数 ***/ var touchEvent={ /*单次触摸事件*/ tap:function(element,fn){ var startTx, startTy; element.addEventListener('touchstart',function(e){ var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; }, false ); element.addEventListener('touchend',function(e){ var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY; // 在部分设备上 touch 事件比较灵敏，导致按下和松开手指时的事件坐标会出现一点点变化 if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){ fn(); } }, false ); }, /*两次触摸事件*/ doubleTap:function(element,fn){ var isTouchEnd = false, lastTime = 0, lastTx = null, lastTy = null, firstTouchEnd = true, body = document.body, dTapTimer, startTx, startTy, startTime; element.addEventListener( 'touchstart', function(e){ if( dTapTimer ){ clearTimeout( dTapTimer ); dTapTimer = null; } var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; }, false ); element.addEventListener( 'touchend',function(e){ var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, now = Date.now(), duration = now - lastTime; // 首先要确保能触发单次的 tap 事件 if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){ // 两次 tap 的间隔确保在 500 毫秒以内 if(duration < 301 ){ // 本次的 tap 位置和上一次的 tap 的位置允许一定范围内的误差 if( lastTx !== null && Math.abs(lastTx - endTx) < 45 && Math.abs(lastTy - endTy) < 45 ){ firstTouchEnd = true; lastTx = lastTy = null; fn(); } } else{ lastTx = endTx; lastTy = endTy; } } else{ firstTouchEnd = true; lastTx = lastTy = null; } lastTime = now; }, false ); // 在 iOS 的 safari 上手指敲击屏幕的速度过快， // 有一定的几率会导致第二次不会响应 touchstart 和 touchend 事件 // 同时手指长时间的touch不会触发click if(~navigator.userAgent.toLowerCase().indexOf('iphone os')){ body.addEventListener( 'touchstart', function(e){ startTime = Date.now(); }, true ); body.addEventListener( 'touchend', function(e){ var noLongTap = Date.now() - startTime < 501; if(firstTouchEnd ){ firstTouchEnd = false; if( noLongTap && e.target === element ){ dTapTimer = setTimeout(function(){ firstTouchEnd = true; lastTx = lastTy = null; fn(); },400); } } else{ firstTouchEnd = true; } }, true ); // iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件 element.addEventListener( 'click', function( e ){ if(dTapTimer ){ clearTimeout( dTapTimer ); dTapTimer = null; firstTouchEnd = true; } }, false ); } }, /*长按事件*/ longTap:function(element,fn){ var startTx, startTy, lTapTimer; element.addEventListener( 'touchstart', function( e ){ if( lTapTimer ){ clearTimeout( lTapTimer ); lTapTimer = null; } var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; lTapTimer = setTimeout(function(){ fn(); }, 1000 ); e.preventDefault(); }, false ); element.addEventListener( 'touchmove', function( e ){ var touches = e.touches[0], endTx = touches.clientX, endTy = touches.clientY; if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){ clearTimeout( lTapTimer ); lTapTimer = null; } }, false ); element.addEventListener( 'touchend', function( e ){ if( lTapTimer ){ clearTimeout( lTapTimer ); lTapTimer = null; } }, false ); }, /*滑屏事件*/ swipe:function(element,fn){ var isTouchMove, startTx, startTy; element.addEventListener( 'touchstart', function( e ){ var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false ); element.addEventListener( 'touchmove', function( e ){ isTouchMove = true; e.preventDefault(); }, false ); element.addEventListener( 'touchend', function( e ){ if( !isTouchMove ){ return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if( Math.abs(distanceX)>20||Math.abs(distanceY)>20 ){ fn(); } }, false ); }, /*向上滑动事件*/ swipeUp:function(element,fn){ var isTouchMove, startTx, startTy; element.addEventListener( 'touchstart', function( e ){ var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false ); element.addEventListener( 'touchmove', function( e ){ isTouchMove = true; e.preventDefault(); }, false ); element.addEventListener( 'touchend', function( e ){ if( !isTouchMove ){ return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if( Math.abs(distanceX) < Math.abs(distanceY) ){ if( distanceY > 20 ){ fn(); isSwipe = true; } } }, false ); }, /*向下滑动事件*/ swipeDown:function(element,fn){ var isTouchMove, startTx, startTy; element.addEventListener( 'touchstart', function( e ){ var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false ); element.addEventListener( 'touchmove', function( e ){ isTouchMove = true; e.preventDefault(); }, false ); element.addEventListener( 'touchend', function( e ){ if( !isTouchMove ){ return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if( Math.abs(distanceX) < Math.abs(distanceY) ){ if( distanceY < -20 ){ fn(); isSwipe = true; } } }, false ); }, /*向左滑动事件*/ swipeLeft:function(element,fn){ var isTouchMove, startTx, startTy; element.addEventListener( 'touchstart', function( e ){ var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false ); element.addEventListener( 'touchmove', function( e ){ isTouchMove = true; e.preventDefault(); }, false ); element.addEventListener( 'touchend', function( e ){ if( !isTouchMove ){ return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if( Math.abs(distanceX) >= Math.abs(distanceY) ){ if( distanceX > 20 ){ fn(); isSwipe = true; } } }, false ); }, /*向右滑动事件*/ swipeRight:function(element,fn){ var isTouchMove, startTx, startTy; element.addEventListener( 'touchstart', function( e ){ var touches = e.touches[0]; startTx = touches.clientX; startTy = touches.clientY; isTouchMove = false; }, false ); element.addEventListener( 'touchmove', function( e ){ isTouchMove = true; e.preventDefault(); }, false ); element.addEventListener( 'touchend', function( e ){ if( !isTouchMove ){ return; } var touches = e.changedTouches[0], endTx = touches.clientX, endTy = touches.clientY, distanceX = startTx - endTx distanceY = startTy - endTy, isSwipe = false; if( Math.abs(distanceX) >= Math.abs(distanceY) ){ if( distanceX < -20 ){ fn(); isSwipe = true; } } }, false ); } } </script> <script> window.οnlοad=function(){ var aDiv=document.getElementsByTagName("div"); touchEvent.tap(aDiv[0],function(){ alert("单次触摸"); }) touchEvent.doubleTap(aDiv[1],function(){ alert("两次触摸"); }) touchEvent.longTap(aDiv[2],function(){ alert("长按"); }) touchEvent.swipe(document,function(){ alert("滑屏了"); }) touchEvent.swipeUp(document,function(){ alert("向上滑屏了"); }) touchEvent.swipeDown(document,function(){ alert("向下滑屏了"); }) touchEvent.swipeLeft(document,function(){ alert("向左滑屏了"); }) touchEvent.swipeRight(document,function(){ alert("向右滑屏了"); }) } </script> </head> <body> <div class="box1">单次触摸我</div> <div class="box2">两次触摸</div> <div class="box3">长按我</div> <span>试一试在屏幕上任意区域滑动</span> </body> </html> |
1、移动框架之zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的API。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的;它的最初目标是在移动端提供一个精简的类似jquery的js库。
a、zepto官网：http://zeptojs.com/
b、zepto中文api：http://www.css88.com/doc/zeptojs_api/
c、zepto包含很多模块，默认下载版本包含的模块有Core，Ajax，Event，Form，IE模块，如果还需要其他的模块，可以自定义构建。
d、zepto自定义构建地址：http://github.e-sites.nl/zeptobulider/
e、touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：
e1、tap元素tap的时候触发，此事件类似click，但是比click快
e2、longTap当一个元素被按住超过750ms触发
e3、swipe ，swipeLeft，swipeRight，swipeUp，swipeDown当元素被划过时触发。（可选择给定的方向）.
实际应用之手机滑到删除
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <title>手机端移动删除</title> <link rel="stylesheet" href="../css/reset.css"> <style> .con{ width:90%; height:500px; margin:50px auto; } .con ul li{ width:100%; height:35px; padding-bottom: 10px; border-bottom:1px solid #ccc; position: relative; overflow: hidden; } .con ul li a{ width:86%; margin: 15px 0; position:absolute; left:0; top:0; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .con ul li span{ width:10%; padding:5px 2%; margin-top:10px; text-align: center; position:absolute; right:-14%; color:#fff; background:#c7254e; } </style> <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script> <script> $(function(){ var $li = $(".list li"); $li.swipeLeft(function(){ $(this).children().eq(0).animate({left:'-10%'},100); $(this).children().eq(1).animate({right:0},100); }); $li.swipeRight(function(){ $(this).children().eq(0).animate({left:0},100); $(this).children().eq(1).animate({right:"-10%"},100); }); $("li span").tap(function(){ var li =$(this).parent(); li.animate({height:0}); li.remove(); }) }) </script> </head> <body> <div class="con"> <ul class="list"> <li> <a href="">北大暑期人气爆棚 排队人群绵延数百米</a> <span class="del">删除</span> </li> <li> <a href="">教育部：经批准儿童可延缓入学，教育部门不得拒收</a> <span class="del">删除</span> </li> <li> <a href="">教育部：高校举办运动队项目数原则上不多于5个</a> <span class="del">删除</span> </li> <li> <a href="">新高考招录方式：高校与考生之间的“精准匹配”</a> <span class="del">删除</span> </li> <li> <a href="">最拼小学生！两天“赶场”9个培训班</a> <span class="del">删除</span> </li> </ul> </div> </body> </html> 滑动删除 |
2、移动框架之swiper
swiper.js是一款成熟的稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。swiper分为2x版和3x版，2x版支持低版本浏览器（IE7），3x放弃支持低版本浏览器。适合应用在移动端。
2x版本中文网址：http://2.swiper.com.cn/
3x版本中文网址：http://www.swiper.com.cn/
Swiper使用方法
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
2.HTML内容。
3.你可能想要给Swiper定义一个大小，当然不要也行。
4.初始化Swiper：最好是挨着</body>标签
5、如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
或者这样（Jquery和Zepto）
swiper（使用参数）
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnraction：用户操作swiper后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
11、onSlideChangeEnd：回调函数，滑动结束时执行
swiper制作实例：
1、swiper制作移动端焦点图实例
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
