touch事件封装tap轻触事件

责编:menVScode 2018-04-11 14:36 阅读(233)

单手指事件:

【1】touchstart:手指按在屏幕上

【2】touchmove:手指在屏幕上移动

【3】touchend:手指离开屏幕

【4】touchcancle :手指操作取消(一般都是意外情况导致操作取消)

多手指事件:

【1】getsturestart:多手指按下

【2】getsturechange:多手指位置改变

【3】getstureend :手指离开

【4】getsturecancel:多手指操作取消(一般都是意外情况导致操作取消)

click事件

【1】PC:click为点击,快速点击两次,则触发两次click事件。 

【2】移动端:click为单击,快速点击两次(手指快速的点击两次触发的是doubleclick事件,而不是click事件)。

        在移动端使用click的时候会有300ms的延迟(因为第一次操作的时候,浏览器会等待300ms看是否由下一次操作,300ms内没有下一次的操作,属于单击,由下一次操作属于双击)。如果你已经使用了click,如何解决300ms的延迟:引入fastClick.min.js。


简单封装tap事件

function myTap(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);    
    });    
    
}  


进一步加强tap事件

HTMLElement.prototype.myTap=HTMLElement.prototype.myTap||function (callBack) {
    var myTapStart=0,
        myTapEnd=0,
        timeTap=300;
    this.addEventListener("touchstart",function (e) {
        //获取touchstart事件的时间戳
        myTapStart=e.timeStamp;
        //changedTouchs是事件对象TouchEvent上面的属性,上面存储了一个当前操作的信息。
        let point=e.changedTouches[0];
       this.strX=point.pageX;
       this.strY=point.pageY;
       this.isMove=false;
    },false);
    this.addEventListener("touchmove",function (e) {
        let point=e.changedTouches[0];
        let changeX=point.pageX-this.strX;
        let changeY=point.pageY-this.strY;
        if(Math.abs(changeX)>10||Math.abs(changeY)>10){
            this.isMove=true;
        }
    },false);
    this.addEventListener("touchend",function (e) {
        //获取touchend事件的时间戳
        myTapEnd=e.timeStamp;
        timeTap=myTapEnd-myTapStart;
        if(!this.isMove&&timeTap<=300){
            callBack();
        }
    },false);
};
var box=document.querySelector("#box");
box.myTap(function () {
    console.log("封装好myTap事件");
});
标签: touch tap
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码