引入js即可

  1. //解决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);
    }
  2.  
  3. })();
  4.  
  5. //下面是国外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;
    }
  6.  
  7. $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
    var eventName, action;
    delay = delay == null? 500 : delay;
    eventName = isiOS == true? 'touchend' : 'click';
  8.  
  9. $(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);
  10.  
  11. //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. 小程序BindTap快速连续点击页面跳转多次

    原因: 手机端点击Tap基础事件解决300ms延迟 解决办法: success 里面加一个延迟300ms能解决 setTimeout goRob(e) { const that = this retu ...

  2. 解决UIButton 连续点击重复响应事件问题

    经常会遇到重复点击某个按钮 事件被响应多次的情景, 有时候可能对程序本身并没有什么影响 , 可有时候偏偏需要限制button响应事件直接的间隔 . 方法一 : 标记 1 . 利用空闲enable属性来 ...

  3. 解决ios双击页面上移问题

    做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页 ...

  4. 移动端a标签点击图片有阴影处理

    移动端我们在点击页面中的一些图片的时候会出现阴影.处理方法只要给a标签加上 a { -webkit-tap-highlight-color: transparent; -webkit-touch-ca ...

  5. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

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

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

  7. ios访问web页面<div>点击事件不起效果,以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...

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

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

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

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

随机推荐

  1. codeforces Good Bye 2015 B. New Year and Old Property

    题目链接:http://codeforces.com/problemset/problem/611/B 题目意思:就是在 [a, b] 这个范围内(1 ≤ a ≤ b ≤ 10^18)统计出符合二进制 ...

  2. mybatis反向生成sql,基本的增删改查

    用到的几个文件 MyBatisGeneratorProxy.java package com.timestech.wsgk.test.tools; import static org.mybatis. ...

  3. jquery-validation-1.13.1 自定义验证正则

    /*** check Mobile***********************/ jQuery.validator.addMethod("isMobile", function( ...

  4. SQL如何本地数据库连接服务器的数据库

    当我们本地数据库的数据作为测试的时候,需要服务器上的数据,但是每次都远程服务器打开数据库查看数据是很麻烦的,那么我们如何让本地的数据库连接服务器上的数据库.前提是你本地的数据库的版本必须和服务器上的数 ...

  5. 用Python套接字创建HTTP客户与服务器程序

    最近在学习python,网络编程中,python寥寥几句,就可以创建一个服务端和客户端程序: 服务端: import sockets = socket.socket()host = socket.ge ...

  6. Java Collection、Map集合总结

    1.Java中的Collection集合总结 Collection |---List(存储有序,可重复) |---ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全.效率高 |--- ...

  7. 让U盘永不中毒的解决办法

    一.背景: 在学校上课的时候,有个老师很潇洒的拿着一个U盘就来教室上课了.然后快上课的时候在电脑上准备播放课件.注意,这一瞬间其妙的事情发生了,课件因为他的U盘中病毒了,打不开了,老师当时笑了.后来又 ...

  8. supersr--九宫格公式(根据多少行多少列排版)

    - (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...

  9. [网络流24题] 太空飞行计划(cogs 727)

    [问题描述] W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,-,Em},和进行这些实验需要使用的全部仪 ...

  10. MVC学习笔记---各种上下文context

    0  前言 AspNet MVC中比较重要的上下文,有如下: 核心的上下文有HttpContext(请求上下文),ControllerContext(控制器上下文) 过滤器有关有五个的上下文Actio ...