自定义封装移动端事件库

淡淡的烟草味﹌ 2023-06-14 04:14 19阅读 0赞

> 封装移动端事件库的意义

1.  移动端使用click事件会有延迟
2.  有许多左滑或者右滑的操作，原生js没有
3.  有时业务会需要长按事件，原生js没有

#### 开始封装 ####

> 思路分析

1.  既然是库，那么可以先写一个匿名自执行函数(保护内部变量不受污染，定义和调用合为一体)
2.  内部结构分析  
    (a) 是需要外部调用，所以需要一个对外提供的接口  
    (b) 需要选取元素，进行操作，所以做一个初始方法  
    © 其它原型方法，比如点击，长按，滑动

> 开始操作

第一步：匿名自执行函数

(function (window){  
    		//传入window，提高变量的查找效率
    	})(window);

第二步：内部架构搭建

对外提供的接口 + 初始化方法

(function (window){  
    	function myMobile(selector){   //对外提供的接口。
    	      //调用这个函数的原型对象上的_init方法，并返回
    	      return myMobile.prototype._init(selector);
        }
        myMobile.prototype = { 
            /*初始化方法，获取当前查找的对象*/
            _init: function (selector){ 
                if (typeof selector == "string"){ 
                    //把查找到的元素存入到这个原型对象上。
                    this.ele = window.document.querySelector(selector);
                    //返回值其实就是原型对象。
                    return this;
                }
            },
    	  }
    	})(window);

第三步：原型方法添加（全部的代码）

(function (window){   
        function myMobile(selector){   
            return myMobile.prototype._init(selector);
        }
        myMobile.prototype = { 
            /*初始化方法，获取当前query对象的方法*/
            _init: function (selector){ 
                if (typeof selector == "string"){ 
                    //把查找到的元素存入到这个原型对象上。
                    this.ele = window.document.querySelector(selector);
                    //返回值其实就是原型对象。
                    return this;
                }
            },
            /*单击事件： * 为了规避click的300ms的延迟，自定义一个单击事件 触摸时间小于500ms为单击事件 * */
            tap: function (handler){ 
                this.ele.addEventListener("touchstart", touchFn);
                this.ele.addEventListener("touchend", touchFn);
    
                var startTime,
                    endTime;
    
                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;
                    }
                }
            },
            /** * 长按 * @param handler * 大于500ms为长按事件 */
            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" :  //500ms之后执行
                            timerId = setTimeout(function (){ 
                                handler.call(this, e);
                            }, 500)
                            break;
                        case "touchmove" :
                            //如果中间有移动也清除定时器
                            clearTimeout(timerId)
                            break;
                        case "touchend" :
                            //如果在500ms之内抬起了手指，则需要定时器
                            clearTimeout(timerId);
                            break;
                    }
                }
            },
            /** * 左侧滑动。 * 记录手指按下的左边，在离开的时候计算 deltaX是否满足左滑的条件 */
            slideLeft: function (handler){ 
                this.ele.addEventListener("touchstart", touchFn);
                this.ele.addEventListener("touchend", touchFn);
                var startX, startY, endX, endY;
    
                function touchFn(e){ 
                    e.preventDefault();
                    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;
                            //x方向移动大于y方向的移动，并且x方向的移动大于25个像素，表示在向左侧滑动
                            if (Math.abs(endX - startX) >= Math.abs(endY - startY) && startX - endX >= 25){ 
                                handler.call(this, e);
                            }
                            break;
                    }
                }
            },
            /* 右侧滑动 */
            rightLeft: function (e){ 
                //TODO: 这里交给自己diy
            }
        }
        //全局$赋值 可以直接调用
        window.$ = window.myMobile = myMobile;
    })(window);

> 页面调用

<!DOCTYPE> 
    <html lang="ZH-cn"> 
        <head>
            <meta charset="utf-8" >
            <title>标题</title>
            <meta name="keywords" content="关键字" /> 
            <meta name="description" content="网页描述" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <script src="./event.js"></script>
        </head>
        <style>
         
        </style>
    <body>
        
        <button>点我</button>
        <script>
                $("button").tap(function (e){ 
                    console.log("单击事件")
                })
                $("button").longTag(function (){ 
                    console.log("长按事件");
                })
                $("button").slideLeft(function (e){ 
                    console.log(this);
                    this.innerHTML = "左侧滑动了....."
                })    
        </script>
    </body>
    </html>

> FAQ

大家在使用的时候可能会有一些疑问，比如说我左滑事件为什么会触发单击事件？一般实际业务中，不存在这种场景。如果有，某一个元素既有单击事件又有左滑事件，那做一个节流阀就ok了，做一个判断，如果是左滑或者右滑事件就禁止触发单击事件。

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义封装移动端事件库

> 封装移动端事件库的意义 1. 移动端使用click事件会有延迟 2. 有许多左滑或者右滑的操作，原生js没有 3. 有时业务会需要长按事件，原生js没有开始封

淡淡的烟草味﹌/ 2023年06月14日 04:14/ 0 赞/ 20 阅读

相关移动端事件总结

1. click事件单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟 1. touch类事件触摸事件，有t

野性酷女/ 2023年05月29日 06:27/ 0 赞/ 32 阅读

相关 JavaScript移动端事件

移动端事件 ontouchstart 手指按下 ontouchmove 手指移动 ontouchend 手指抬起因为浏览器模拟移动端不稳定推荐使用 addEv

刺骨的言语ヽ痛彻心扉/ 2023年02月27日 10:57/ 0 赞/ 29 阅读

相关移动端keyup事件

最近在做一个项目需求，需要实现一个类似谷歌搜索的功能，可以模糊匹配到中文和字母。当时想到了keyup事件，每当键盘按下时监控input框值的变化，在电脑和安桌手机上测试都没有问

不念不忘少年蓝@/ 2022年07月15日 11:43/ 0 赞/ 448 阅读

相关移动端事件及事件应用

<table> <tbody> <tr> <td><b>目录</b></td> </tr> </tbody> </table> 1.移动端事件基

末蓝、/ 2022年06月04日 00:57/ 0 赞/ 428 阅读

相关移动端 - touch事件

touch 事件在模拟器下不支持用on的方式来给元素加touch事件，推荐用addEventListener方式 `touchstart` 手指触碰

矫情吗；*/ 2022年05月19日 07:21/ 0 赞/ 388 阅读

相关【移动端】封装一个简单的tap事件鸭

1. tap事件与click事件移动端click事件缺陷移动端也有click事件，但是在移动端为了区别是点击还是滑动（当用户触碰到屏幕的时候，可能是点击，也可

缺乏、安全感/ 2022年01月06日 13:21/ 0 赞/ 348 阅读

相关【移动端】学习移动端的滑动手势事件

1.判断滑动的手势条件触发touchmove事件移动的超过一定的距离，如10px，像滑动了1px，2px这类的距离太小，不能视为滑动 <!DOCT

红太狼/ 2022年01月06日 12:23/ 0 赞/ 560 阅读

相关移动端tap事件，也称移动端的click事件

pc端的的click事件在移动端也是可以出发的，只是在移动端会出现延迟的现象，早期移动设备浏览器网页时内容比较小，为增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确

骑猪看日落/ 2021年12月01日 12:26/ 0 赞/ 628 阅读

相关移动端手势库

1：GMU:http://cloudajs.org/ui/brand/gmu GMU是基于zepto的mobile UI组件库，提供webapp、pa

墨蓝/ 2021年07月24日 17:26/ 0 赞/ 659 阅读