移动端tap轻触事件封装

关注

翻译最新推荐文章于 2026-03-16 05:37:47 发布 960 阅读 AI 写同款· GEO 优化 ›

移动端交互手势详解及实现一丶概述如今移动端设备大行其道，前端也走进了移动的领域。在写移动端页面的交互效果的时候，我么难免要接触一些复杂的手势，而不仅仅像pc端那样简单的鼠标事件。手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。二丶移动端手势事件在浏览器中，为我们提供的手势并不算多，阅读详情

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事件

收录于