首页 > 学院 > 开发设计 > 正文

移动端tap轻触事件封装

2019-11-09 17:35:21
字体:
来源:转载
供稿:网友
function my_tap(dom,callBack){  //第一不能超过延时时间,第二不能使移动  //获取一些必要的值开始时间,延时时间,是否是移动      var startTime=0;      var delayTime=200;      var isMove=false;      dom.addEventListener("touchstart",function(event){          //记录开始时间          startTime=Date.now();      });      dom.addEventListener("touchmove",function(event){          //如果发生了移动就改变isMove的值          isMove=true;      });      dom.addEventListener("touchend",function(event){          //如果发生了移动就不执行回调          if(isMove) return;          //如果大于延时时间就不执行回调函数          if(Date.now()-startTime>delayTime) return;          callBack(event);        });      }  

在移动端(这里小编还是强调一下把页面变成移动端页面千万别忘记视口属性viewport的设置)中我们的浏览器只认识三个事件(touchstart、touchmove、touchend),而我们使用其他的框架封装的事件全都是使用这三个事件来封装来的,那么我们接下来就给大家拿一个实例来分析一下如何使用这三个基础的函数来进行封装!

   好现在我们来分析一下整个函数封装的思路:如果是轻敲的话那必须满足两个条件:1.按住的事件不能超过延时时间2.不能再页面中移动,也就是说不能出发touchmove事件


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表