长治网站建设案例,青岛开发区 网站建设,dz论坛中英文网站怎么做,北京app网站建设价格移动端点击延迟事件
1. 移动端浏览器在派发点击事件的时候#xff0c;通常会出现300ms左右的延迟
2. 原因: 移动端的双击会缩放导致click判断延迟
fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。
注意几点
1、PC端无效
2、Android 上的 Chrome …移动端点击延迟事件
1. 移动端浏览器在派发点击事件的时候通常会出现300ms左右的延迟
2. 原因: 移动端的双击会缩放导致click判断延迟
fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。
注意几点
1、PC端无效
2、Android 上的 Chrome 32 浏览器如果在 viewport meta tag 中添加了 widthdevice-width那么就不会有 300ms 的延迟所以FastClick 监听器就不会被附加。
3、如果在 viewport meta tag 添加了 user-scalableno也不会有延迟。 解决方式
1. 禁用缩放 meta name viewport contentuser-scalableno 缺点: 网页无法缩放
2. 更改默认视口宽度 meta nameviewport contentwidthdevice-width 缺点: 需要浏览器的支持
3. css touch-action touch-action的默为 auto将其置为 none 即可移除目标元素的 300 毫秒延迟 缺点: 新属性可能存在浏览器兼容问题
4. tap事件 zepto的tap事件, 利用touchstart和touchend来模拟click事件 缺点: 点击穿透
5. fastclick 原理: 在检测到touchend事件的时候会通过DOM自定义事件立即出发模拟一个click事件并把浏览器在300ms之后真正的click事件阻止掉 缺点: 脚本相对较大 使用: // 引入script typeapplication/javascript src/path/to/fastclick.js/script// 使用了jquery的时候$(function() {FastClick.attach(document.body);});// 没使用jquery的时候if (addEventListener in document) {document.addEventListener(DOMContentLoaded, function() {FastClick.attach(document.body);}, false);}
在vue中使用 // 安装npm install fastclick -S// 引入import FastClick from fastclick// 使用FastClick.attach(document.body);
