做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

解决ios双击页面上移问题的更多相关文章

  1. 解决ios微信页面回退不刷新的问题

    在回退后需要刷新的页面加以下js $(function () {   var isPageHide = false;   window.addEventListener('pageshow', fun ...

  2. 解决ios手机页面overflow scroll滑动很卡的问题

    在移动端html中经常出现横向/纵向滚动的效果,但是在iPhone中滚动速度很慢,感觉不流畅,有种卡卡的感觉,但是在安卓设备上没有这种感觉; 要解决这个问题很简单: 一行代码搞定 -webkit-ov ...

  3. 解决IOS滑动页面fixed浮动问题

    <div style="position: fixed"></div> <div style="height: 100%; overflow ...

  4. 移动端-解决ios连续点击页面上移问题

    引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...

  5. 解决IOS微信浏览器底部会出现向前向后返回按钮,返回不刷新的问题

    <script type="text/javascript"> //解决IOS返回页面不刷新的问题 var isPageHide = false; window.add ...

  6. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)

    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...

  7. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  8. 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法

    问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...

  9. 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

随机推荐

  1. JavaScript中的作用域链原理

    执行环境 作用域链的形成与执行环境(Execution Environment)相关,在JavaScript当中,产生执行环境有如下3中情形: 1 进入全局环境 2 调用eval函数 3 调用func ...

  2. HTML5简单入门系列(九)

    前言 上篇本来应该就是最后一篇了,但是楼主总觉得没有写上一个简单应用,不算是完整的学习系列.所以增加一篇关于动画的应用,对一个开源动画的介绍(很基础,非楼主原创). 本篇介绍一个基于Canvas的发光 ...

  3. 基于VMware的eCos应用程序测试(hello wold)

    (1)脚本配置ecosconfig new pccdl_component CYG_HAL_STARTUP { # Flavor: data # No user value, uncomment th ...

  4. INSERTION_SORT插入排序C++实现

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下用C++实现插入排序的升序和降序排序 算法来自<算法导论> #include< ...

  5. 不同服务器数据库之间的数据操作 sp_addlinkedserver

    --创建链接服务器  exec sp_addlinkedserver   'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 '  exec sp_addlinkedsrv ...

  6. Planner – 项目管理软件

    http://www.appinn.com/planner/   Planner 是一款开源.易用.跨平台的项目管理软件.@appinn 二猪用了 OpenProject 几年,现在已经受够了它的各种 ...

  7. USB系列之二:读取USB设备的描述符

    在前面的文章中,我们已经给出了USB协议的链接地址,从这篇文章起,我们会涉及到许多USB 1.1的内容,我们的指导思想是先从熟悉USB 1.1协议入手,先使用现成的HCD和USBD,直接面对客户端驱动 ...

  8. 线程池 异步I/O线程 <第三篇>

    在学习异步之前先来说说异步的好处,例如对于不需要CPU参数的输入输出操作,可以将实际的处理步骤分为以下三步: 启动处理: 实际的处理,此时不需要CPU参数: 任务完成后的处理: 以上步骤如果仅仅使用一 ...

  9. jQuery 获取 URL信息

    jQuery获取URL信息有很多方法,但是使用这个插件就非常爽了. 托管地址在:http://github.com/allmarkedup/jQuery-URL-Parser // http: //l ...

  10. SQL Server 2008空间数据应用系列四:基础空间对象与函数应用

    原文:SQL Server 2008空间数据应用系列四:基础空间对象与函数应用 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 R2调测. ...