300ms点击延迟
300ms点击延迟
移动端的300ms
点击延迟是因为移动端可以进行双击缩放的操作,因此浏览器在click
之后要等待300ms
,看用户有没有下一次点击,也就是判断这次操作是单击还是双击。如果通过监听touchstart
事件来替代click
事件的话,会导致一些问题:touchstart
是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart
事件;当页面上有两个元素A
和B
,A
元素在B
元素上重叠放置,如果A
元素的touchstart
事件绑定的回调函数是隐藏A
元素自身,那么当点击A
元素后A
元素会消失,事件的触发顺序是touchstart -> touchend -> click
,如果在300ms
内没有第二次点击便会触发click
事件,此时由于A
元素消失,那么click
事件便落到了B
元素上,如果B
元素是个链接或者绑定了click
事件,那么B
元素的默认行为或者是绑定的事件回调便会意外地触发,这就是点击穿透问题,解决这个问题还是需要解决click
事件的300ms
延迟问题。
解决方案
禁止缩放
通过完全禁止缩放来使双击缩放的功能失效,此时浏览器就可以禁用默认的双击缩放行为并且去掉300ms
点击延迟,但是在这种情况下双指缩放的功能也会失效。
<meta name="viewport" content="user-scalable=no">
<!-- 或 -->
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1">
更改默认的视口宽度
浏览器在包含width=device-width
也就是视口宽度=
设备宽度或者设置为比viewport
值更小的页面上禁用双击缩放行为,没有双击缩放就没有300ms
点击延迟,这种方案没有完全禁用缩放,而是禁用浏览器默认的双击缩放行为,用户仍然可以通过双指缩放操作来缩放页面。
<meta name="viewport" content="width=device-width">
touch-action
CSS
的touch-action
属性用于设置触摸屏用户如何操纵元素的区域,它允许移除特定元素或整个文档的触发延迟,而无需禁用缩放。
touch-action:none;
/* 浏览器兼容性 https://caniuse.com/#search=touch-action */
FastClick
FastClick
是FT Labs
专门为解决移动端浏览器300ms
点击延迟问题所开发的一个轻量级的库。
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
// https://github.com/ftlabs/fastclick
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.cnblogs.com/shytong/p/5463673.html
https://www.cnblogs.com/shiyou00/p/10410935.html
https://blog.csdn.net/qq_41047322/article/details/81287325
- P3386 【模板】二分图匹配
- √n求单值欧拉函数
- 模板语言
- Django 相关
- 装饰器进阶
- P2894 [USACO08FEB]酒店Hotel
- 深入理解计算机系统读书笔记之第一章:漫游
- 【实战】工控网络协议模糊测试:用peach对modbus协议进行模糊测试
- 【Django错误】OSError: raw write() returned invalid length 14 (should have been between 0 and 7)
- P2234 [HNOI2002]营业额统计
- Python 中格式化字符串 % 和 format 两种方法之间的区别
- [实战]如何在Kali Linux中进行WIFI钓鱼?
- jQuery
- P3369 【模板】普通平衡树(Treap/SBT)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【原创】Spring Boot 如何手写stater
- 【原创】Spring Boot 过滤器、监听器、拦截器的使用
- 关于useState的一切
- 关于useEffect的一切
- (25)Bash数值运算与运算符
- (27)正则表达式
- (28)字符截取命令cut、printf
- (29)字符截取命令awk
- RTSP协议视频平台EasyNVR流媒体服务器音频播放完毕后,视频为什么也会卡住?
- Redis | Redis 有序集合相关命令
- TypeScript 4.0正式发布!现在是开始使用它的最佳时机
- 微服务开源框架TARS 之 基础组件
- Gitlab-ci:从零开始的前端自动化部署
- 从 1 到 0 构建博客项目(导读)
- 应该在JavaScript中使用Class吗