一段封裝好的移動端點選事件的程式碼
阿新 • • 發佈:2018-11-05
/*封裝移動端的tap點選事件*/ var demo={ /*dom:傳入的dom元素讓我們可以為任意的元素新增tap事件*/ tap:function(dom,callback){ /*判斷是否傳入物件同時物件應該是一個dom元素*/ if(!dom || typeof dom != "object"){ return; } var startTime,startX,startY; dom.addEventListener("touchstart",function(e){ /*判斷是否只有一根手指進行操作*/ if(e.targetTouches.length > 1){ //說明不止一個手指 return; } /*記錄手指開始觸控的時間*/ startTime=Date.now(); /*記錄當前手指的座標*/ startX= e.targetTouches[0].clientX; startY= e.targetTouches[0].clientY; /*來做一些與事件相關的初始化操作*/ }) /*touchend:當手指鬆開時候觸發,意味著當前元素上已經沒有手指物件了,所以無法通過targetTouches來獲取手指物件*/ dom.addEventListener("touchend",function(e){ /*判斷是否只有一根手指進行操作*/ if(e.changedTouches.length > 1){ //說明不止一個手指 return; } if(Date.now()-startTime > 150){ //長按操作 return; } /*判斷鬆開手指時的座標與觸控開始時的座標的距離差異*/ var endX=e.changedTouches[0].clientX; var endY=e.changedTouches[0].clientY; /*這裡暫且將距離差異定為6*/ if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){ /*判斷使用者是否傳入的回撥函式*/ callback && callback(e); } }) } };