UIWebvView 解决onClick 延迟相应问题
在使用 UIWebView 的过程中, 发现 onClick 触发需要等待300-500ms, Google了一下, 发现是因为ScrollView 在等待doubleTap, 所以有延迟
使用如下代码是无效的.
[webView.scrollView setDelaysContentTouches:NO]
目前的解决方案是使用onTouchStart代替onClick, 找到了如下一段js代码
function NoClickDelay(el) {
this.element = typeof el == 'object' ? el : document.getElementById(el);
if( window.Touch ) this.element.addEventListener('touchstart', this, false);
} NoClickDelay.prototype = {
handleEvent: function(e) {
switch(e.type) {
case 'touchstart': this.onTouchStart(e); break;
case 'touchmove': this.onTouchMove(e); break;
case 'touchend': this.onTouchEnd(e); break;
}
}, onTouchStart: function(e) {
e.preventDefault();
this.moved = false; this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
this.theTarget.className+= ' pressed'; this.element.addEventListener('touchmove', this, false);
this.element.addEventListener('touchend', this, false);
}, onTouchMove: function(e) {
this.moved = true;
this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
}, onTouchEnd: function(e) {
this.element.removeEventListener('touchmove', this, false);
this.element.removeEventListener('touchend', this, false); if( !this.moved && this.theTarget ) {
this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
this.theTarget.dispatchEvent(theEvent);
} this.theTarget = undefined;
}
};
使用方法
new NoClickDelay(document.getElementById('element'));
jQuery 版本:
(function( $ ) {
$.fn.noClickDelay = function() {
var $wrapper = this;
var $target = this;
var moved = false;
$wrapper.bind('touchstart mousedown',function(e) {
e.preventDefault();
moved = false;
$target = $(e.target);
if($target.nodeType == 3) {
$target = $($target.parent());
}
$target.addClass('pressed');
$wrapper.bind('touchmove mousemove',function(e) {
moved = true;
$target.removeClass('pressed');
});
$wrapper.bind('touchend mouseup',function(e) {
$wrapper.unbind('mousemove touchmove');
wrapper.unbind('mouseup touchend');
if(!moved && $target.length) {
$target.removeClass('pressed');
$target.trigger('click');
$target.focus();
}
});
});
};
})( jQuery );
$('#wrapperElement').noClickDelay();
----------------------------update. 找到一更完美的开源库
UIWebvView 解决onClick 延迟相应问题的更多相关文章
- laravel(lumen)配置读写分离后,强制读主(写)库数据库,解决主从延迟问题
在Model里面加上下面这句,强制读主(写)库数据库,解决主从延迟问题. public static function boot() { //清空从连接,会自动使用主连接 DB::connection ...
- MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步,解决主从复制延迟问题!
MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步,解决主从复制延迟问题!2017年06月15日 19:59:44 蓝色-鸢尾 阅读数:2062版权声明:本文为博主原创文章,如需转 ...
- zepto的touch模块解决click延迟300ms问题以及点透问题的详解
大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...
- 解决onclick事件的300ms延时问题
首先是资源的下载:fastclick.js 作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写的博文相当的好,对于写文章方面确实是望尘莫及啊,所以想详细了解原理的朋友直接去大牛 ...
- 大家都知道fastclick能解决300ms延迟,现在我们来看一下,使用方法
1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中,找到mian.js这个入口文件,打开 3.在其中加入: import FastClic ...
- 解决iscroll5在手机页面上onclick事件失效
Iscroll.js使用之后页面上面A标签的onclick事件无效了 解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...
- [转载] 使用MySQL Proxy解决MySQL主从同步延迟
原文地址:http://koda.iteye.com/blog/682547 MySQL的主从同步机制非常方便的解决了高并发读的应用需求,给Web方面开发带来了极大的便利.但这种方式有个比较大的缺陷在 ...
- Replication--复制延迟的诊断和解决
要解决复制延迟问题,需要首先定位复制延迟发生点,再找出复制延迟的原因,再做相应处理. 复制延迟发生点:1. 发布服务器2. 分发服务器3. 订阅服务器4. 发布服务器与分发服务器和分发服务器与订阅服务 ...
- 使用MySQL Proxy解决MySQL主从同步延迟
MySQL的主从同步机制非常方便的解决了高并发读的应用需求,给Web方面开发带来了极大的便利.但这种方式有个比较大的缺陷在于MySQL的同步机制 是依赖Slave主动向Master发请求来获取数据的, ...
随机推荐
- SD卡协议规范学习
首先,本博文遵照SD卡协议3.01版本,最旧协议版本为1.10,但是协议是向下兼容的.SD卡Physical Layer Simplified Specification Version 3.01英文 ...
- 半模对话框 QProgressDialog
http://doc.qt.io/qt-4.8/qprogressdialog.html progressdialog 用到了qfuture http://blog.csdn.net/liang198 ...
- 前缀 树 背单词(Remember the Word,LA 3942)
已哭瞎. 搞了2个多小时的错误居然是在 没有初始化............教训:每个例子一定要考虑到初始化问题.! 每个节点存了一个数组 该数组记录的有26个大小 0-25分别表示记录表示'a' ...
- Studious Student Problem Analysis
(http://leetcode.com/2011/01/studious-student-problem-analysis.html) You've been given a list of wor ...
- Sliding Window Maximum
(http://leetcode.com/2011/01/sliding-window-maximum.html) A long array A[] is given to you. There is ...
- [Swust OJ 360]--加分二叉树(区间dp)
题目链接:http://acm.swust.edu.cn/problem/360/ Time limit(ms): 1000 Memory limit(kb): 65535 Description ...
- hive 分区操作记录
创建分区: alter table table_name add partition (dt='20150423') location '/data/text/20150423';
- Android 手机上安装并运行 Ubuntu 12.04
ubuntu.sh脚本的原地址变动了,导致下载不了,现在更新了网盘地址.小技巧:遇到一些下载失效的时候可以试一试p2p下载工具(如 easyMule.迅雷等)试一试,说不定有人分享过~* —————— ...
- Google地图,Baidu地图数据供应商
http://janwen.iteye.com/blog/488659 Google百度 我老以为百度,Google的地图产品是自己开发的,原来是别人提供的数据, 百度的数据提供商有 北京世纪高通科 ...
- dedecms(织梦)自定义表单后台显示不全 自定义模型当中添加自定义字段后在后台添加内容后不显示解决方案
我们常用dedecms 自定义表单做留言功能.但是偶尔会遇到这样一个问题,就是 在前台提交表单后..后天显示不全.特别是中文字符 都不会显示, 比如下图: 这是因为 如果你织梦是gbk的话那就对了 ...