vue自定義移動端touch事件，點選、滑動、長按事件
阿新 • • 發佈：2018-12-12
**HTML**
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" /> <link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" /> <link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <!--引入vue--> <script src="../../static/plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> #app{ height: 35rem; background-color: red; color: #fff; text-align: center; line-height: 5rem; } </style> <body> <!--mvvm--> <!--view --> <script type="text/javascript"> if (!localStorage.user_id) { location.href = "../../new_file.html"; } </script> <div id="app" class="box" v-tap="vuetouch" v-longtap="{fn:vuetouch,name:'長按'}" v-swipeleft="{fn:vuetouch,name:'左滑'}" v-swiperight="{fn:vuetouch,name:'右滑'}" v-swipeup="{fn:vuetouch,name:'上滑'}" v-swipedown="{fn:vuetouch,name:'下滑'}" > {{ name }} </div> <script src="../../static/js/product/touch.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:"#app", data:{ name:"開始" }, methods:{ vuetouch:function(s,e){ this.name=s.name; } } }); </script> </body> </html>
js核心內容touch.js
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<-10){ this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);//左滑 }; }else{ if(disY>10){ this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);//下滑 }; if(disY<-10){ 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"); } });
將以上程式碼儲存到一個js檔案內，引入到頁面vue庫檔案之後、使用者js檔案之前。這樣就可以使用vue的觸屏事件了。