解决移动端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 ...
随机推荐
- python的web框架知识点
一个完整的web应用:服务器收到来自浏览器的一个请求,服务器将请求内容的网页返回给浏览器,让浏览器显示出来.[而浏览器与服务器之前的传输协议是HTTP] HTTP是一个基于TCP/IP通信协议来传递数 ...
- git clone 中途停止不动
参考链接1:https://blog.csdn.net/weixin_36965307/article/details/105046699 参考链接2:https://blog.csdn.net/le ...
- Thinkphp中取消url中的index.php 和 Home 默认模块
将配置文件中改: <?phpreturn array( //'配置项'=>'配置值' 'URL_MODEL'=>'2', //去掉url中index.php ' ...
- Apache Unomi 远程表达式代码执行漏洞（CVE-2020-13942）
影响版本: Apache Unomi < 1.5.2
- 从小白角度探索Android事件分发机制
今早来上班时看到郭神这边文章超赞,剧情很好引人入胜,特此备份! https://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650244386 ...
- Tensor：Pytorch神经网络界的Numpy
摘要:Tensor,它可以是0维.一维以及多维的数组,你可以将它看作为神经网络界的Numpy,它与Numpy相似,二者可以共享内存,且之间的转换非常方便. 本文分享自华为云社区<Tensor:P ...
- Oracle数据泵导入的时候创建索引是否会使用并行？
一.疑问,Oracle数据泵导入的时候创建索引是否会使用并行? 某客户需要使用数据泵进行迁移,客户咨询导入的时间能不能加快一点. 那么如何加快导入的速度呢? 多加一些并行,那么创建索引内部的索引并行度 ...
- Vue实现点击按钮进行文件下载(后端Java)
最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想 ...
- cas5.3.1 从搭建到连接mysql(简而优美)
前言: cas是单点登录服务框架,为单点登录业务提供了便捷服务,它分为client,server端,client端要聚合到我们自己的项目. server端要单独构建运行,本篇文章主要讲解一下cas5. ...
- Linux中的DNS主从解析
目录 一.主服务器配置(紧接着正反解析实验) 1.1.修改区域配置文件 二.从服务器配置(启动另一台虚拟机) 2.1.安装服务 2.2.修改主配置文件 2.3.修改区域配置文件 2.4.修改dns服务 ...