手机移动端事件封装

复制代码
(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();
复制代码

 

posted @   木头人_a  阅读(227)  评论(0编辑  收藏  举报
编辑推荐:
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
· AI与.NET技术实操系列:使用Catalyst进行自然语言处理
· 分享一个我遇到过的“量子力学”级别的BUG。
阅读排行:
· AI Agent爆火后,MCP协议为什么如此重要!
· Draw.io:你可能不知道的「白嫖级」图表绘制神器
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· Java使用多线程处理未知任务数方案
点击右上角即可分享
微信分享提示