关于这三个移动端的事件,详细的资料网上一搜一大片,我就不浪费时间了
1.移动端长按事件
var timer = null; $(ele).on('touchstart',function(){ timer = setTimeout(function(){ alert("我是长按事件!") },800); }); $(ele).on('touchend',function(){ clearTimeout(timer); });
说明:通过定时器模拟长按事件,这个例子基于jQuery,【ele】是要长按的元素;
2.移动端上下左右滑动事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>touch</title> </head> <body> <div id="touchLR">动起来</div> <script> // 左右滑动事件 var startX = 0, startY = 0; function touchSatrtFunc(evt) { try { evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc:' + e.message); } } function touchMoveFunc(evt) { try { evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 var text; //判断滑动左右方向 if (x - startX>=30) { text = '向右滑动'; document.getElementById('touchLR').innerHTML = text; }else if(x - startX<=-30){ text = '向左滑动'; document.getElementById('touchLR').innerHTML = text; } //判断滑动上下方向 if (y - startY>=30) { text = '向下滑动'; document.getElementById('touchLR').innerHTML = text; }else if(y - startY<=-30){ text = '向上滑动'; document.getElementById('touchLR').innerHTML = text; } } catch (e) { alert('touchMoveFunc:' + e.message); } } function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); } bindEvent(); </script> </body> </html>
说明:具体原理一搜一堆,这里的具体例子,拷贝就能用;我的学习方式是,不管什么原理之类的,先要做的就是把需求弄出来,在捉摸原理;事半功倍