首页 > 网站 > WEB开发 > 正文

解决ios双击页面上移问题

2024-04-27 14:11:32
字体:
来源:转载
供稿:网友

解决ios双击页面上移问题

做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了!

还有就是页面会上移...

//解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){    var agent = navigator.userAgent.toLowerCase();        //检测是否是ios    var iLastTouch = null;                                //缓存上一次tap的时间    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)    {        document.body.addEventListener('touchend', function(event)        {            var iNow = new Date()                .getTime();            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;            var delta = iNow - iLastTouch;            if (delta < 500 && delta > 0)            {                event.PReventDefault();                return false;            }            iLastTouch = iNow;        }, false);    }})();//下面是国外coder给的解决方案//http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads
(function($){    // Determine if we on iPhone or iPad    var isiOS = false;    var agent = navigator.userAgent.toLowerCase();    if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){           isiOS = true;    }     $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){        var eventName, action;        delay = delay == null? 500 : delay;        eventName = isiOS == true? 'touchend' : 'click';         $(this).bind(eventName, function(event){            var now = new Date().getTime();            var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;            var delta = now - lastTouch;            clearTimeout(action);            if(delta<500 && delta>0){                if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){                    onDoubleTapCallback(event);                }            }else{                $(this).data('lastTouch', now);                action = setTimeout(function(evt){                    if(onTapCallback != null && typeof onTapCallback == 'function'){                        onTapCallback(evt);                    }                    clearTimeout(action);   // clear the timeout                }, delay, [event]);            }            $(this).data('lastTouch', now);        });    };})(Zepto);//usage:$(selector).doubletap(    /** doubletap-dblclick callback */    function(event){        alert('double-tap');    },    /** touch-click callback (touch) */    function(event){        alert('single-tap');    },    /** doubletap-dblclick delay (default is 500 ms) */    400);//下面是国外coder给的解决方案--end//解决ios双击网面上移问题--end


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表