博主信息
富贵人生
博文
87
粉丝
0
评论
0
访问量
3449
积分:0
P豆:174

【前端】如何阻止ios微信下双击屏幕向上滑的问题

2021年10月08日 23:36:48阅读数:30博客 / 富贵人生

双击页面的时候页面会弹一下,请问这个问题该怎么解决?

回答

//解决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) */);//下面是国外coder给的解决方案--end//解决ios双击网面上移问题--end

您好;我没明白;阻止买QQ号码地图这个时间的原理是什么;缓存top 时间作用是什么


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论