解决移动端click事件300ms延迟的问题
方法1、部分浏览器的<meta>标签加上width=device-width就能解决。
方法2、引入fastclick.js库
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>2.3 click 300ms延迟</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
}
</style>
<script src="js/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>
</head>
<body>
<!-- 原因
double click 双击
解决办法
fastclick -->
<div id="box" class="box"></div> <script src="http://192.168.1.5:1337/vorlon.js"></script>
<script>
var boxEl = document.getElementById('box');
var startTime = 0;
boxEl.addEventListener('touchstart', function () {
startTime = Date.now();
console.log('touchstart');
}, false);
boxEl.addEventListener('click', function () {
console.log('click');
console.log(Date.now() - startTime);
}, false);
</script>
</body>
</html>
解决移动端click事件300ms延迟的问题的更多相关文章
- 移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
- 处理移动端click事件300ms延迟的好方法—FastClick
下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...
- 解决触摸屏设备click事件300ms的延迟的问题
从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.300ms的等待 ...
- 移动端click事件延迟300ms到底是怎么回事，该如何解决？
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 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 ...
- 移动端点击事件300ms延迟问题解决方案——fastclick.js
移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
随机推荐
- PAT乙级：1076 Wifi密码 (15分)
PAT乙级:1076 Wifi密码 (15分) 题干 下面是微博上流传的一张照片:"各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题 ...
- Leetcode：面试题68 - II. 二叉树的最近公共祖先
Leetcode:面试题68 - II. 二叉树的最近公共祖先 Leetcode:面试题68 - II. 二叉树的最近公共祖先 Talk is cheap . Show me the code . / ...
- python内置函数--- hasattr、setattr、getattr
1.描述 hasattr() 函数用于判断对象是否包含对应的属性. 语法 hasattr 语法: hasattr(object, name) 2.描述 setattr() 函数对应函数 getattr ...
- Mysql用户、权限、密码管理
一.用户管理 默认:用户root 创建用户: use mysql; create user 'alex'@'192.168.193.200' identified by '123456'; 创建了al ...
- jvm源码解读--06 Method 方法解析
进入 // Methods bool has_final_method = false; AccessFlags promoted_flags; promoted_flags.set_flags(0) ...
- Typhoon靶机
仅供个人娱乐 靶机信息 靶机下载地址:https://www.vulnhub.com/entry/typhoon-102,267/ 一.主机探测 arp-scan -l nmap -sV -p- -A ...
- Fast Run：提高 MegEngine 模型推理性能的神奇功能
作者:王博文 | 旷视 MegEngine 架构师 一.背景 对于深度学习框架来说,网络的训练/推理时间是用户非常看中的.在实际生产条件下,用户设计的 NN 网络是千差万别,即使是同一类数学计算,参数 ...
- Python - 解包的各种骚操作
为什么要讲解包 因为我觉得解包是 Python 的一大特性,大大提升了编程的效率,而且适用性很广 啥是解包 个人通俗理解:解开包袱,拿出东西 正确理解:将元素从可迭代对象中一个个取出来 python ...
- [WUSTCTF2020]朴实无华
[WUSTCTF2020]朴实无华 考点:1.MD5碰撞 2.命令执行绕过 打开题发现编码有些问题,修改编码为utf-8 看了源码和请求包没发现什么东西,看到title想到了robots.txt文件, ...
- Js实现随机某个li样式增加
一.首先引入jquery cdn 二.基础样式 三.目的 为了使随机某个li背后有个旋转的图片 四.核心代码 html代码: <div class="bg3"> ...