做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
新闻热点
疑难解答