html5长按屏幕 自定义,H5-vue移动端自定义事件上滑，长按等

H5-vue移动端自定义事件上滑，长按等

v-tap="(e)=>vueTouch('点击',e)"

v-longtap="(e)=>vueTouch('长按',e)"

v-swipeleft="(e)=>vueTouch('左滑',e)"

v-swiperight="(e)=>vueTouch('右滑',e)"

v-swipeup="(e)=>vueTouch('上滑',e)"

v-swipedown="(e)=>vueTouch('下滑',e)"

>{{ name }}

**js**

kim=new Vue({

el:"#app",

data:{

name:"开始"

},

methods:{

vueTouch:function(s,e){

this.name=s.name;

}

}

});

function vueTouch(el,binding,type){//触屏函数

var _this=this;

this.obj=el;

this.binding=binding;

this.touchType=type;

this.vueTouches={x:0,y:0};//触屏坐标

this.vueMoves=true;

this.vueLeave=true;

this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;

this.obj.addEventListener("touchstart",function(e){

_this.start(e);

},false);

this.obj.addEventListener("touchend",function(e){

_this.end(e);

},false);

this.obj.addEventListener("touchmove",function(e){

_this.move(e);

},false);

};

vueTouch.prototype={

start:function(e){//监听touchstart事件

this.vueMoves=true;

this.vueLeave=true;

this.longTouch=true;

this.vueTouches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY};

this.time=setTimeout(function(){

if(this.vueLeave&&this.vueMoves){

this.touchType=="longtap"&&this.vueCallBack(this.binding.value,e);

this.longTouch=false;

};

}.bind(this),1000);

},

end:function(e){//监听touchend事件

var disX=e.changedTouches[0].pageX-this.vueTouches.x;//计算移动的位移差

var disY=e.changedTouches[0].pageY-this.vueTouches.y;

clearTimeout(this.time);

if(Math.abs(disX)>10||Math.abs(disY)>100){//当横向位移大于10，纵向位移大于100，则判定为滑动事件

this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);//若为滑动事件则返回

if(Math.abs(disX)>Math.abs(disY)){//判断是横向滑动还是纵向滑动

if(disX>10){

this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);//右滑

};

if(disX

this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);//左滑

};

}else{

if(disY>10){

this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);//下滑

};

if(disY

this.touchType=="swipeup"&&this.vueCallBack(this.binding.value,e);//上滑

};

};

}else{

if(this.longTouch&&this.vueMoves){

this.touchType=="tap"&&this.vueCallBack(this.binding.value,e);

this.vueLeave=false

};

};

},

move:function(e){//监听touchmove事件

this.vueMoves=false;

}

};

Vue.directive("tap",{//点击事件

bind:function(el,binding){

new vueTouch(el,binding,"tap");

}

});

Vue.directive("swipe",{//滑动事件

bind:function(el,binding){

new vueTouch(el,binding,"swipe");

}

});

Vue.directive("swipeleft",{//左滑事件

bind:function(el,binding){

new vueTouch(el,binding,"swipeleft");

}

});

Vue.directive("swiperight",{//右滑事件

bind:function(el,binding){

new vueTouch(el,binding,"swiperight");

}

});

Vue.directive("swipedown",{//下滑事件

bind:function(el,binding){

new vueTouch(el,binding,"swipedown");

}

});

Vue.directive("swipeup",{//上滑事件

bind:function(el,binding){

new vueTouch(el,binding,"swipeup");

}

});

Vue.directive("longtap",{//长按事件

bind:function(el,binding){

new vueTouch(el,binding,"longtap");

}

});