移动端H5点击有300ms延迟

在移动端的 H5 开发中,可以采取以下几种方法来解决移动设备上的 300ms 点击延迟问题:

  1. 使用标签设置viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=no">

这样可以让页面在移动设备上以真实的像素值进行渲染,避免了默认的缩放行为,减少了点击延迟。

  1. 使用CSS样式touch-action属性:
.touch-action {
  touch-action: manipulation;
}

这样可以告诉浏览器禁用默认的双击缩放行为,以及加快触摸事件的响应速度。

  1. 使用fastclick.js库:

fastclick.js是一个轻量级的库,用于解决移动设备上的点击延迟问题。它通过监听touchstartclick事件,并模拟触发click事件来提供更快的点击响应。你可以将该库引入到项目中,并在页面加载完成后初始化。

<script src="fastclick.js">script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
script>
  1. 使用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>

你可能感兴趣的:(前端)