手机移动端事件封装
(function(window){ function myQuery(selector) { return myQuery.prototype._init(selector); } myQuery.prototype = { _init: function(selector){ if(typeof selector == "string"){ this.ele = document.querySelector(selector); return this; } }, touchstart: function(handler){ this.ele.addEventListener("touchstart",handler) }, touchmove: function(handler){ this.ele.addEventListener("touchmove",handler) }, touchend: function(handler){ this.ele.addEventListener("touchend",handler); }, tap: function(handler){ // 点击事件 var startTime,endTime; this.ele.addEventListener("touchstart",touchFn); this.ele.addEventListener("touchend",touchFn); function touchFn(e){ e.preventDefault(); switch (e.type){ case "touchstart": startTime = new Date().getTime(); break; case "touchend": endTime = new Date().getTime(); if(endTime - startTime < 500){ handler.call(this,e); } break; } } }, longtag: function(handler){ //长按事件 this.ele.addEventListener("touchstart",touchFn); this.ele.addEventListener("touchmove",touchFn); this.ele.addEventListener("touchend",touchFn); var timerId; function touchFn(e){ switch (e.type){ case "touchstart": timerId = setTimeout(function(){ handler.call(this,e) },500); break; case "touchmove": clearInterval(timerId); break; case "touchend": clearTimeout(timerId); break; } } }, slideLeft: function(handler){ this.ele.addEventListener("touchstart",touchFn); this.ele.addEventListener("touchend",touchFn); var startX, startY, endX, endY; function touchFn(e){ var firstTouch = e.changedTouches[0]; switch (e.type) { case "touchstart": startX = firstTouch.pageX; startY = firstTouch.pageY; break; case "touchend": endX = firstTouch.pageX; endY = firstTouch.pageY; if(Math.abs(endX-startX) >= Math.abs(endY-startY) && startX - endX >25){ handler.call(this,e); } break; } } }, slideRight: function(handler){ this.ele.addEventListener('touchstart',touchFn); this.ele.addEventListener('touchend',touchFn); var startX, startY, endX, endY; function touchFn(e){ var firstTouch = e.changedTouches[0]; switch (e.type) { case "touchstart": startX = firstTouch.pageX; startY = firstTouch.pageY; break; case "touchend": endX = firstTouch.pageX; endY = firstTouch.pageY; if(Math.abs(endX-startX)>= Math.abs(endY-startY) && endX - startX >25){ handler.call(this,e); } break; } } }, follow: function(){//跟随事件 this.ele.addEventListener("touchstart",touchFn) this.ele.addEventListener("touchmove",touchFn); var currentLeft, currentTop, startX, startY, moveX, moveY; function touchFn(event){ switch (event.type){ case "touchstart": currentLeft = parseInt(this.offsetLeft); currentTop = parseInt(this.offsetTop); startX = event.touches[0].pageX; startY = event.touches[0].pageY; break; case "touchmove": moveX = event.touches[0].pageX; moveY = event.touches[0].pageY; this.style.marginLeft = currentLeft+(moveX-startX)+"px"; this.style.marginTop = currentTop+(moveY-startY)+"px"; break; } } } } window.$ = myQuery; })(window);
$(div).follow();