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
  • 相关阅读:
    软件需求阅读笔记二
    寒假小程序开发记录2
    软件需求阅读笔记一
    寒假小程序开发记录1
    软件工程概论课个人总结
    06大道至简阅读笔记
    golang算法——leetcode-46
    实验 5 Spark SQL 编程初级实践
    scala链接数据库Exception in thread "main" java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
    Error:(15, 103) value toDF is not a member of org.apache.spark.rdd.RDD[Employee] .map(attributes => Employee(attributes(0).trim.toInt, attributes(1), attributes(2).trim.toInt)).toDF()
  • 原文地址:https://www.cnblogs.com/Ivangel/p/4377972.html
Copyright © 2011-2022 走看看