美文网首页
JQuery prototype添加tap事件,处理移动端30

JQuery prototype添加tap事件,处理移动端30

作者: ZhiPengTu | 来源:发表于2018-09-03 16:45 被阅读0次

    jquery 没有设置移动端的触摸(tap)事件, 这里以插件的形式另外拓展了 tap 事件,一个关键的步骤 layUI.prototype=JQuery .prototype; 将JQuery .prototype赋值给新的layUI.prototype,之后有layUI 来调取 jquery的方法,这里tap方法的指向仅限于layUI这个新对象,并不会改变jquery原型里面的东西。需要注意的是,可能需要在header添加meta

     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5,user-scalable=no" />
    

    这里依然可以采用其他的方式来,fastclick ,jqueryModle ,zepo或者其他来解决问题。

    (function(window,$){
        var layUI = layUI||{};
        function layUI(selecter){     
            return $(selecter);//拷贝 query的方法以及对象
        }
        layUI.prototype=$.prototype;   //将 jquery的prototype赋值给新对象
        layUI.prototype.on = function (type, Fn) {//对原方法进行修改
            if(type=='tap'){         //判断点击事件的类型 符合目标函数 进入通道  添加监听事件
                var tapStartTime = 0,
                        tapEndTime = 0,
                        tapTime = 500, //tap等待时间,在此事件下松开可触发方法
                        tapStartClientX = 0,
                        tapStartClientY = 0,
                        tapEndClientX = 0,
                        tapEndClientY = 0,
                        tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消(根据chrome浏览器默认的判断取消点击的移动量)
                        cancleClick = false;
                    this[0].addEventListener('touchstart', function() {
                        tapStartTime = event.timeStamp;
                        var touch = event.changedTouches[0];
                        tapStartClientX = touch.clientX;
                        tapStartClientY = touch.clientY;
                        cancleClick = false;
                    })
                    this[0].addEventListener('touchmove', function() {
                        var touch = event.changedTouches[0];
                        tapEndClientX = touch.clientX;
                        tapEndClientY = touch.clientY;
                        if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
                            cancleClick = true;
                        }
                    })
                    this[0].addEventListener('touchend', function() {
                        tapEndTime = event.timeStamp;
                        if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
                            Fn();
                        }
                 }) 
            }  
        };    
        if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
            module.exports = layUI;
        } else if (typeof define === 'function' && define.amd) {
            define(function () {
                return layUI;
            });
        } else {
            window.layUI = layUI;
        }
        })(window,jQuery);
    

    相关文章

      网友评论

          本文标题:JQuery prototype添加tap事件,处理移动端30

          本文链接:https://www.haomeiwen.com/subject/lnhiwftx.html