你的位置:首页 > Java教程

[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