在移动端的 H5 开发中,可以采取以下几种方法来解决移动设备上的 300ms 点击延迟问题:
- 使用标签设置viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=no">
这样可以让页面在移动设备上以真实的像素值进行渲染,避免了默认的缩放行为,减少了点击延迟。
- 使用CSS样式
touch-action
属性:
.touch-action {
touch-action: manipulation;
}
这样可以告诉浏览器禁用默认的双击缩放行为,以及加快触摸事件的响应速度。
- 使用
fastclick.js
库:
fastclick.js
是一个轻量级的库,用于解决移动设备上的点击延迟问题。它通过监听touchstart
和click
事件,并模拟触发click
事件来提供更快的点击响应。你可以将该库引入到项目中,并在页面加载完成后初始化。
<script src="fastclick.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
</script>
- 使用
pointer-events
CSS属性:
将元素的pointer-events
属性设置为none
可以禁用元素的点击事件,然后通过添加一个透明的遮罩层来捕获点击事件。
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
然后在需要触发点击事件的元素上添加一个遮罩层:
<div class="overlay"></div>
以上是一些常见的解决方案,你可以根据实际需要选择适合你的项目的方法来解决移动端 H5 点击延迟问题。
解决方案
- 禁用缩放,设置
meta
标签user-scalable=no
- 现在浏览器方案
meta
中设置content="width=device-width"
fastclick.js
初期解决方案 fastClick
// 使用
window.addEventListener('load',()=>{
FastClick.attach(document.body)
},false)
fastClick原理
- 监听
touchend
事件(touchstart
touchend
会先于click
触发) - 使用自定义
DOM
事件模拟一个click
事件 - 把默认的
click
事件(300ms
之后触发)禁止掉
触摸事件的响应顺序
ontouchstart
ontouchmove
ontouchend
onclick
现代浏览器的改进
meta
中设置content="width=device-width"
就不会有300ms
的点击延迟了。浏览器认为你要在移动端做响应式布局,所以就禁止掉了
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>