html 手机端click 事件延迟问题(fastclick.js使用方法)
下载地址: fastclick.js
为什么存在延迟?
从点击屏幕上的元素到触发元素的 click
事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。
1、引入fastclick.js 文件
<script type='application/javascript' src='fastclick.js'></script>
2、调用方法
普通调用:
window.onload = function() {
FastClick.attach(document.body);
}
jquery调用:
$(function() {
FastClick.attach(document.body);
});
html 手机端click 事件延迟问题(fastclick.js使用方法)的更多相关文章
- html 手机端click 事件去掉黑色阴影效果
添加css样式 html{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 1. -web ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
- 移动端的click事件延迟触发的原理是什么?如何解决这个问题?
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟 会出现点透现象 在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
- dedecms织梦手机端文章内容页图片不能自适应解决方法
dedecms织梦手机端文章内容页图片不能自适应解决方法: 方法一修改手机端文章页模板代码: 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签 ...
- JS 插件 fastclick.js 解决手机端click点击延迟
FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...
- 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js
1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...
- 移动端的传统click事件延迟和点透现象
一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
随机推荐
- Notepad++安装xml插件
环境: win7 64位 Notepad++7.3.3 原生的Notepad++不自带xml文件的插件,所以在显示xml文件时并不分行(如下图所示),对于用户编辑,查看的操作而言,并不友好,所以需要安 ...
- shell---rpm
[root@master src]# rpm -qpl epel-release-latest-6.noarch.rpm ##查询该rpm包安装了什么warning: epel-rel ...
- hdu 2899 Strange fuction —— 模拟退火
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2899 模拟退火: 怎么也过不了,竟然是忘了写 lst = tmp ... 还是挺容易A的. 代码如下: # ...
- hibernate学习三 精解Hibernate之核心文件
一 hibernate.cfg.xml详解 1 JDBC连接: 2 配置C3P0连接池: 3 配置JNDI数据源: 4 可选的配置属性: 5 hibernate二级缓存属性 6 hibernate事务 ...
- 招聘.Net中高级软件研发工程师
岗位职责: 1.参与国土不动产系列软件需求分析.系统架构分析与设计: 2.为产品中的复杂功能编写产品开发需求文档: 3.根据设计文档或需求说明完成代码编写.调试.测试和维护: 4.配合上级进行技术决策 ...
- TypeScript完全解读(26课时)_19.其他重要更新
ts3.3升级过来有很多重要的更新 没法归类的更新,在本节课几种讲一下 创建update.ts,然后在index.ts内引入 async和promise es6中增加了promise的支持,能够很好处 ...
- 20个Flutter实例视频教程-第12节: 流式布局 模拟添加照片效果
视频地址: https://www.bilibili.com/video/av39709290/?p=12 博客地址: https://jspang.com/post/flutterDemo.html ...
- 使用you-get下载网页小视频(实际上你可以下载任意你想要的web网页中的内容)
1. 什么是you-get? You-Get是一个小型的命令行实用程序,用于从Web下载媒体内容(视频,音频,图像),如果没有其他方便的方法可以尝试使用you-get. 2.安装you-get 打开命 ...
- lightoj1006【记忆化搜索(我是这么叫)】
搜索的时候记录一下,注意要long long: #include<cstdio> #include<queue> #include<map> #include< ...
- 学习RESTFul架构
一.RESTFul介绍 1.一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机 ...