在使用 UIWebView 的过程中, 发现 onClick 触发需要等待300-500ms, Google了一下, 发现是因为ScrollView 在等待doubleTap, 所以有延迟

使用如下代码是无效的.

  1. [webView.scrollView setDelaysContentTouches:NO]

目前的解决方案是使用onTouchStart代替onClick, 找到了如下一段js代码

  1. function NoClickDelay(el) {
  2. this.element = typeof el == 'object' ? el : document.getElementById(el);
  3. if( window.Touch ) this.element.addEventListener('touchstart', this, false);
  4. }
  5.  
  6. NoClickDelay.prototype = {
  7. handleEvent: function(e) {
  8. switch(e.type) {
  9. case 'touchstart': this.onTouchStart(e); break;
  10. case 'touchmove': this.onTouchMove(e); break;
  11. case 'touchend': this.onTouchEnd(e); break;
  12. }
  13. },
  14.  
  15. onTouchStart: function(e) {
  16. e.preventDefault();
  17. this.moved = false;
  18.  
  19. this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
  20. if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;
  21. this.theTarget.className+= ' pressed';
  22.  
  23. this.element.addEventListener('touchmove', this, false);
  24. this.element.addEventListener('touchend', this, false);
  25. },
  26.  
  27. onTouchMove: function(e) {
  28. this.moved = true;
  29. this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
  30. },
  31.  
  32. onTouchEnd: function(e) {
  33. this.element.removeEventListener('touchmove', this, false);
  34. this.element.removeEventListener('touchend', this, false);
  35.  
  36. if( !this.moved && this.theTarget ) {
  37. this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');
  38. var theEvent = document.createEvent('MouseEvents');
  39. theEvent.initEvent('click', true, true);
  40. this.theTarget.dispatchEvent(theEvent);
  41. }
  42.  
  43. this.theTarget = undefined;
  44. }
  45. };

使用方法

  1. new NoClickDelay(document.getElementById('element'));

jQuery 版本:

  1. (function( $ ) {
  2. $.fn.noClickDelay = function() {
  3. var $wrapper = this;
  4. var $target = this;
  5. var moved = false;
  6. $wrapper.bind('touchstart mousedown',function(e) {
  7. e.preventDefault();
  8. moved = false;
  9. $target = $(e.target);
  10. if($target.nodeType == 3) {
  11. $target = $($target.parent());
  12. }
  13. $target.addClass('pressed');
  14. $wrapper.bind('touchmove mousemove',function(e) {
  15. moved = true;
  16. $target.removeClass('pressed');
  17. });
  18. $wrapper.bind('touchend mouseup',function(e) {
  19. $wrapper.unbind('mousemove touchmove');
  20. wrapper.unbind('mouseup touchend');
  21. if(!moved && $target.length) {
  22. $target.removeClass('pressed');
  23. $target.trigger('click');
  24. $target.focus();
  25. }
  26. });
  27. });
  28. };
  29. })( jQuery );
  1. $('#wrapperElement').noClickDelay();

----------------------------update. 找到一更完美的开源库

fastclick

UIWebvView 解决onClick 延迟相应问题的更多相关文章

  1. laravel(lumen)配置读写分离后,强制读主(写)库数据库,解决主从延迟问题

    在Model里面加上下面这句,强制读主(写)库数据库,解决主从延迟问题. public static function boot() { //清空从连接,会自动使用主连接 DB::connection ...

  2. MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步,解决主从复制延迟问题!

    MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步,解决主从复制延迟问题!2017年06月15日 19:59:44 蓝色-鸢尾 阅读数:2062版权声明:本文为博主原创文章,如需转 ...

  3. zepto的touch模块解决click延迟300ms问题以及点透问题的详解

    大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么 ...

  4. 解决onclick事件的300ms延时问题

    首先是资源的下载:fastclick.js 作为一个新手,插件原理什么的研究不透,看的也是似懂非懂的,网上有很多大牛写的博文相当的好,对于写文章方面确实是望尘莫及啊,所以想详细了解原理的朋友直接去大牛 ...

  5. 大家都知道fastclick能解决300ms延迟,现在我们来看一下,使用方法

    1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中,找到mian.js这个入口文件,打开 3.在其中加入: import FastClic ...

  6. 解决iscroll5在手机页面上onclick事件失效

    Iscroll.js使用之后页面上面A标签的onclick事件无效了   解决办法 实例化IScroll的时候把preventDefault设为false,默认为true var myScroll; ...

  7. [转载] 使用MySQL Proxy解决MySQL主从同步延迟

    原文地址:http://koda.iteye.com/blog/682547 MySQL的主从同步机制非常方便的解决了高并发读的应用需求,给Web方面开发带来了极大的便利.但这种方式有个比较大的缺陷在 ...

  8. Replication--复制延迟的诊断和解决

    要解决复制延迟问题,需要首先定位复制延迟发生点,再找出复制延迟的原因,再做相应处理. 复制延迟发生点:1. 发布服务器2. 分发服务器3. 订阅服务器4. 发布服务器与分发服务器和分发服务器与订阅服务 ...

  9. 使用MySQL Proxy解决MySQL主从同步延迟

    MySQL的主从同步机制非常方便的解决了高并发读的应用需求,给Web方面开发带来了极大的便利.但这种方式有个比较大的缺陷在于MySQL的同步机制 是依赖Slave主动向Master发请求来获取数据的, ...

随机推荐

  1. 常用CSS HACK

    常用CSS HACK IE6 3像素bug和双边距bug一样的经典 现象: IE6下浮动元素和不浮动元素之间会有3px间隙(3px bug,div.float-left + div.float-non ...

  2. npm note

    npm docs 设置镜像站 因为npmjs的官方网站,总会下载比较慢或打不开,所以通常需要设置一下镜像站来更好的安装npm库 npm install --registry http://regist ...

  3. c++实现将表达式转换为逆波兰表达式

    https://github.com/Lanying0/lintcode 所属: 数据结构->线性结构->栈 问题: 给定一个表达式字符串数组,返回该表达式的逆波兰表达式(即去掉括号). ...

  4. Android面试题06

    51. 一条最长的短信息约占多少byte? 中文70(包括标点),英文160,160个字节 这个说法不准确, 要跟手机制式运营商等信息有关. 做实验,看源码 ArrayList<String&g ...

  5. XML DOM 节点

    来自:w3cschool菜鸟教程 在 DOM 中,XML 文档中的每个成分都是一个节点. DOM 节点 根据 DOM,XML 文档中的每个成分都是一个节点. DOM 是这样规定的: 整个文档是一个文档 ...

  6. vs2010 项目编译 ResGen.exe”已退出,代码为 -1073741701

    解决的办法如下: 1.关闭所有Visual Studio: 2.以管理员的身份打开命令提示窗口:(开始-运行-cmd) 3.更改目录至"CD C:\Program Files (x86)\M ...

  7. 初识EF

    1. EF是Entity Framework的缩写,全称是(ADO.Net Entity Framework),是以ADO.Net为基础所发展出来的对象关系对应(O/R Mapping)解决方案,早起 ...

  8. 【JS控制图片显示的大小(图片等比例缩放)】

    效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  9. IOS实现UIButton图文混排、自定义按钮按下和正常状态下不同的背景颜色、根据文字长度自定义UIButton长度

    在一些项目中,我们需要自定义自己的UIButton,使Button上面同时具有图片和文字描述,实现自定义UIButton的图文混排. 首先我们需要定义一个继承自UIButton的类,同时实现自己的in ...

  10. ExtJs004define定义类

    Ext.onReady(function () { //在Ext中如何去定义一个类: Ext.define(className , properties , callback) Ext.define( ...