JQuery prototype添加tap事件,处理移动端300延迟

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

 

这里依然可以采用其他的方式来,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事件,处理移动端300延迟)