移动端-解决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 ...
随机推荐
- codeforces Good Bye 2015 B. New Year and Old Property
题目链接:http://codeforces.com/problemset/problem/611/B 题目意思:就是在 [a, b] 这个范围内(1 ≤ a ≤ b ≤ 10^18)统计出符合二进制 ...
- mybatis反向生成sql,基本的增删改查
用到的几个文件 MyBatisGeneratorProxy.java package com.timestech.wsgk.test.tools; import static org.mybatis. ...
- jquery-validation-1.13.1 自定义验证正则
/*** check Mobile***********************/ jQuery.validator.addMethod("isMobile", function( ...
- SQL如何本地数据库连接服务器的数据库
当我们本地数据库的数据作为测试的时候,需要服务器上的数据,但是每次都远程服务器打开数据库查看数据是很麻烦的,那么我们如何让本地的数据库连接服务器上的数据库.前提是你本地的数据库的版本必须和服务器上的数 ...
- 用Python套接字创建HTTP客户与服务器程序
最近在学习python,网络编程中,python寥寥几句,就可以创建一个服务端和客户端程序: 服务端: import sockets = socket.socket()host = socket.ge ...
- Java Collection、Map集合总结
1.Java中的Collection集合总结 Collection |---List(存储有序,可重复) |---ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全.效率高 |--- ...
- 让U盘永不中毒的解决办法
一.背景: 在学校上课的时候,有个老师很潇洒的拿着一个U盘就来教室上课了.然后快上课的时候在电脑上准备播放课件.注意,这一瞬间其妙的事情发生了,课件因为他的U盘中病毒了,打不开了,老师当时笑了.后来又 ...
- supersr--九宫格公式(根据多少行多少列排版)
- (void)layoutSubviews{ [super layoutSubviews]; NSUInteger count = self.subviews.count; NSInteger ma ...
- [网络流24题] 太空飞行计划(cogs 727)
[问题描述] W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,-,Em},和进行这些实验需要使用的全部仪 ...
- MVC学习笔记---各种上下文context
0 前言 AspNet MVC中比较重要的上下文,有如下: 核心的上下文有HttpContext(请求上下文),ControllerContext(控制器上下文) 过滤器有关有五个的上下文Actio ...