zoukankan      html  css  js  c++  java
  • 解决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
  • 相关阅读:
    DockerFile构建镜像
    docker基本命令
    docker持久化
    JS 中 this 指向问题
    解决"/usr/local/bin/dockercompose: Permission denied"问题
    docker配置国内镜像
    docker网络
    国内常用镜像地址
    Visual Studio中快捷键收缩和展开代码段方法
    STM32中关于RCC时钟的理解
  • 原文地址:https://www.cnblogs.com/Ivangel/p/4377972.html
Copyright © 2011-2022 走看看