手机移动端事件封装
(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();
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
· AI与.NET技术实操系列:使用Catalyst进行自然语言处理
· 分享一个我遇到过的“量子力学”级别的BUG。
· AI Agent爆火后,MCP协议为什么如此重要!
· Draw.io:你可能不知道的「白嫖级」图表绘制神器
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· Java使用多线程处理未知任务数方案