解决触摸屏设备click事件300ms的延迟的问题
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。300ms的等待时间,会让用户体验大大折损,fastclick.js库很好的解决了这个问题。
使用FastClick的时候,在需要使用的层上,实例化它。我们使用document.body是因为希望所有的按钮和链接都获得快速点击。
使用方法:
window.addEventListener('load', function() {
FastClick.attach(document.body);
}, false);
然后直接使用onclick事件,就不会有原先300ms延迟的问题了。
另外,还有一种方法解决延迟问题,就是使用zepto.js库的tap事件,但是tap事件在特殊情况下会存在点透,所以在这里推荐使用fastclick.js库。
解决触摸屏设备click事件300ms的延迟的问题的更多相关文章
- 解决移动端click事件300ms延迟的问题
方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 分享一个移动项目中消除click事件点击延迟的方法
对于前端工程师来说,apicloud无疑给我们提供了很好的平台,有各种各样的模块供我们使用,但是在实际项目的时候,很大部分的代码,还是需要我们用html css js来实现的.但是呢,移动端页面对于c ...
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- 5步解决移动设备上的300ms点击延迟
译者:jmouse 大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟. 1.不要太 ...
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 解决jquery绑定click事件出现点击一次执行两次问题
问题定位:通过浏览器F12定位到点击一次出现两次调用. 问题复现: $("#mail_span").on("click",function(){ ...
随机推荐
- 医院管理者必须知道的医院客户关系管理(CRM)
客户关系管理(customer relationship management,CRM)是在二战之后首先由美国IBM.道氏.通用等大型企业提出并运用的一种以有效销售为目的的市场营销思想,其理论基础就是 ...
- A session of Log Collect, Retrieval and Analysis using ELK Stack
Motivation 运维过程中对问题的定位往往需要跟踪和定位日志.分布式和弹性计算的引入,使得日志的定位和分析变得越发复杂. 本次实践主要的目的是考察现有成熟的日志收集.检索和分析方案:Kafka+ ...
- uva133 救济金发放
#include<stdio.h> #define maxn 20 ], n; int go( int p,int d,int t ) {// printf("a[%d]=%d\ ...
- call指令的一个细节
执行下面这个程序之后,ax的值是多少? assume cs:code code segment start: call s inc ax s: pop ax mov ax, 4c00h int 21h ...
- 【WEB前端】CSS继承性和层叠性(极度重要)
1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...
- js中十进制数转换为16进制
使用 Number类的 toString()方法: var num = 255; console.log(num.toString(16));//输出FF
- Python之路,day7-Python基础
os.system 输出命令结果到屏幕,返回命令执行状态os.popen("dir").read()#会保存命令的执行结果输出py2.7commandscommands.getst ...
- sql 2008 游标
begin declare PlatformBulletin --定义游标 open PlatformBulletin --打开游标 declare @userid int,@zmscompanyid ...
- Yii2 利用controllerMap自定义控制器类
版权声明:本文为博主原创文章,未经博主允许不得转载. Yii2框架为我们自定义好的 controllers,Models,views,标准的MVC结构框架,但是有些时候我们写接口希望结构更加清晰而不 ...
- mysql.my.cnf
[client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedir = /u ...