当前位置: 首页 > news >正文

Fastclick 导致click事件触发两次的问题,fastclickclick

文章原文csdn链接:www.foreverpx.cn 

我在移动web上使用Fastclick这个库去解决300ms延迟问题,但是在安卓4.2下的webview中引发了另一个比较奇怪的bug。

在A页面中有个 a button,在B页面中有个 b button,a和b都在同一个position,给a和b都注册一个click事件。a的click事件触发后跳转到B页面。当a被点击后调到B页面,你会发现b按钮的click事件也被触发了。

没错,事件‘穿透’了两个页面!

但其实并没有穿透,点击a按钮时,其实有如下两个动作:

在ios等设备中,第二个click事件其实被fastclick屏蔽掉了,所以没出现这个问题,但是在android 4.2的浏览器中却bug搬的屏蔽失效,导致这个问题。

查了许多的相关资料,老外称这个现象为ghost click,大部分并没有什么有效的解决方案。

最后在stackoverflow中找到了一个hack方案,如下:

preventClick { width:100%; height:100%; position:absolute; z-index:1000; top:0; left:0; }
<body>
    <div id="preventClick"></div> </body>
function onDeviceReady() {
    setTimeout(function(){ $('#preventClick').hide(); }, 300); }

原理是每个页面前300ms都被一个透明的div去覆盖,所以第二个click是点不到对应的button。。

虽然这种方式比较暴力,但是还是奏效的,在没什么更好的方式前,可以先hack之。

转载于:https://www.cnblogs.com/xiaoshujiang/p/5558468.html

相关文章:

  • 用spring-data-redis实现类似twitter的网站(转)
  • [javaSE] GUI(事件监听机制)
  • android WebViewClient和WebChromeClient
  • vim列模式编辑
  • kafka集群发送消息报错
  • apache2 启用php7.0
  • Android 仿网易新闻v3.5:上下滑动的引导页
  • C语言基础
  • angularjs与require的集成摘抄
  • rsync远程数据备份配置之再次总结
  • HP DL580 G7设置IPMI
  • 面试题与答案
  • Gluon公布完整的Java 9 Mobile创新举措
  • Linux运维(数据库专题)面试题
  • 生产环境提升ssh安全的10种方式
  • 【刷算法】求1+2+3+...+n
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • Protobuf3语言指南
  • React-Native - 收藏集 - 掘金
  • Vue组件定义
  • 代理模式
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 分布式事物理论与实践
  • 微信开源mars源码分析1—上层samples分析
  • 异步
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • 阿里云移动端播放器高级功能介绍
  • 如何用纯 CSS 创作一个菱形 loader 动画
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • #图像处理
  • (读书笔记)Javascript高级程序设计---ECMAScript基础
  • (附源码)php新闻发布平台 毕业设计 141646
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (转)Google的Objective-C编码规范
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .NetCore 如何动态路由
  • .net访问oracle数据库性能问题
  • .Net环境下的缓存技术介绍
  • .NET中的Exception处理(C#)
  • .pub是什么文件_Rust 模块和文件 - 「译」
  • .vue文件怎么使用_vue调试工具vue-devtools的安装
  • @DataRedisTest测试redis从未如此丝滑
  • @JsonFormat与@DateTimeFormat注解的使用
  • @Responsebody与@RequestBody
  • [ vulhub漏洞复现篇 ] JBOSS AS 4.x以下反序列化远程代码执行漏洞CVE-2017-7504
  • [Android View] 可绘制形状 (Shape Xml)
  • [BZOJ4010]菜肴制作
  • [C语言]——内存函数
  • [DM复习]关联规则挖掘(下)
  • [git] windows系统安装git教程和配置
  • [HNOI2010]BUS 公交线路
  • [java基础揉碎]关系运算符(比较运算符)逻辑运算符赋值运算符三元运算符运算符的优先级