你的位置:首页 > Java教程

[Java教程]移动端事件touchstart、touchmove、touchend


关于这三个移动端的事件,详细的资料网上一搜一大片,我就不浪费时间了

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>

说明:具体原理一搜一堆,这里的具体例子,拷贝就能用;我的学习方式是,不管什么原理之类的,先要做的就是把需求弄出来,在捉摸原理;事半功倍