移动端-解决ios连续点击页面上移问题
引入js即可
//解决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连续点击页面上移问题的更多相关文章
- 小程序BindTap快速连续点击页面跳转多次
原因: 手机端点击Tap基础事件解决300ms延迟 解决办法: success 里面加一个延迟300ms能解决 setTimeout goRob(e) { const that = this retu ...
- 解决UIButton 连续点击重复响应事件问题
经常会遇到重复点击某个按钮 事件被响应多次的情景, 有时候可能对程序本身并没有什么影响 , 可有时候偏偏需要限制button响应事件直接的间隔 . 方法一 : 标记 1 . 利用空闲enable属性来 ...
- 解决ios双击页面上移问题
做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页 ...
- 移动端a标签点击图片有阴影处理
移动端我们在点击页面中的一些图片的时候会出现阴影.处理方法只要给a标签加上 a { -webkit-tap-highlight-color: transparent; -webkit-touch-ca ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)
FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
- ios访问web页面<div>点击事件不起效果,以及alert()显示url的解决办法
ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...
- 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
- 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...
随机推荐
- Java集合中List的用法
List接口是Collection接口的子接口,List有一个重要的实现类--ArrayList类,List中的元素是有序排列的而且可重复,所以被称为是序列. List可以精确的控制每个元素的插入位置 ...
- Unity3d《Shader篇》漫反射
Unity3d<Shader篇>漫反射 Shader "Custom/Ambient" { Properties { _MainTex ("Base (RGB ...
- MongoDB 3.0 新特性【转】
本文来自:http://www.open-open.com/lib/view/open1427078982824.html#_label3 更多信息见官网: http://docs.mongodb.o ...
- ecshop修改后台访问地址
本文转自‘做个好男人’的博客. 打开data/config.php,找到define(’ADMIN_PATH’,’admin’),这里是定义后台目录的地方,把其中的admin换成你的后台自定义目录,如 ...
- 【Android Studio错误】 If you are behind an HTTP proxy, please configure the proxy settings either in IDE or Gradle.
解决办法:以管理员身份运行cmd窗口,输入命令“netsh winsock reset” netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Winsock协 ...
- 【文件】读取一个文件夹下所有的jpg图片
今天做视频处理的时候,发现给的视频是用jpg图片的形式给出的,名字的命名规律性不是很强.就想找一种通用的遍历文件夹下图片的方法. 开始在网上找到了下面这份代码,发现只能读取所有的文件夹,文件都被跳过了 ...
- Android笔记:四大组件
1.Activity(是用户可以看到的主要的界面,使用时需要在AndroidManifest.xml中编辑声明.) 启动模式: 启动模式一共有四种,分别是standard.singleTop.sing ...
- mongoDB 3.0以前版本 - 入门指南、示例
一.准备工作 1. 下载mongoDB 下载地址:http://www.mongodb.org/downloads 选择合适你的版本 相关文档:http://www.mongodb.org/displ ...
- 查询局域网内在线电脑IP
COLOR 0A CLS @ECHO Off Title 查询局域网内在线电脑IP :send @ECHO off&setlocal enabledelayedexpansion ECHO 正 ...
- eclipse failed to create the java virtual machine 问题图文解析
eclipse failed to create the java virtual machine 问题图文解析 分类: java常用软件异常2010-10-02 23:45 73200人阅读 评论( ...