解决移动端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 ...
随机推荐
- Kafka之--自动启动zookeeper & kafka 脚本
1) 首先配置SSH免密登录,在这里我用kafka(151)这台机器来作为启动脚本的存放和执行机器 [root@kafaka3 .ssh]# pwd #生成SSH KEY /root/.ssh [ro ...
- java常见的面试题（二）
1.mybatis 中 #{}和 ${}的区别是什么? #{}是预编译处理,${}是字符串替换: Mybatis在处理#{}时,会将sql中的#{}替换为?号,调用PreparedStatement的 ...
- BigDecimal之除不尽报错
当bigdecimal除不尽(循环小数)后会报错,下面的是BigDecimal ,divide方法提供的精确小数方法(推荐使用) BigDecimal avgCapital = loanAmount. ...
- IntelliJ IDEA2021.2 常用快捷键汇总总结
Java开发环境:Windows10 64bit+JDK8+IDEA2021.2 =========================================================== ...
- xampp搭建开源项目iwebshop后，服务器重启后再启动xampp显示组件都启动ok,但是实际启动失败解决办法
最近用xampp搭建了开源商城项目iwebshop,刚搭建完没问题,可是周一来因为服务器重启了,我再启动xampp,显示组件都启动ok了,但是用linux命令查看相关组件的进程时,发现实际没启动起来, ...
- css问题记录
1.flex:1元素被子元素撑开,将该元素overflow不为visible,构造BFC,或子元素脱离文档流
- 类加载机制+JVM调优实战+代码优化
类加载机制 Java源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直 ...
- 2020国防科大综述：3D点云深度学习—综述（点云形状识别部分）
目录 摘要 1.引言: 2.背景 2.1 数据集 2.2评价指标 3.3D形状分类 3.1基于多视图的方法 3.2基于体素的方法 3.3基于点的方法 3.3.1 点对多层感知机方法 3.3.2基于卷积 ...
- DDD领域驱动理解
在理解领域驱动的时候,网上很多大谈理论的文章,这种对于初学者不是太容易接受.根据我自己的学习经历,建议按照如下几个步骤学习: 粗略的看一遍领域驱动的理论,做到心中有形,知道领域驱动是什么,解决什么问题 ...
- ACM学习笔记：二叉堆
title : 堆 date : 2021-8-3 tags : ACM,数据结构 什么是堆 堆是一棵具有特定性质的二叉树,堆的基本要求是堆中所有结点的值必须大于等于(或小于等于)其孩子结点的值,这也 ...