移动端H5300ms解决方案

文章类型:h5

发布者:hp

发布时间:2023-05-20

在移动端的 H5 开发中，有时会遇到点击（tap）事件延迟的问题，通常被称为 "300ms 延迟"。

1：双击缩放：通过判断用户的点击行为，来判断是要进行双击缩放还是响应点击事件。

2：手势识别：浏览器会等待一段时间，来判断用户的点击是否是单击操作，还是潜在的滑动手势

1：禁止缩放,设置meta标签 user-scalable=no/eta中设置content="width=device-width"

<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	  </head>

1：使用 FastClick 库：可以在移动端消除点击延迟。通过在移动设备上模拟 click 事件来解决延迟问题。并在页面加载完成后对需要消除延迟的元素进行初始化

监听touchend事件（touchstart touchend会先于click触发），使用自定义DOM事件模拟一个click事件，把默认的click事件（300ms之后触发）禁止掉

ontouchstart->ontouchmove->ontouchend->onclick

  window.addEventListener('load',()=>{
		FastClick.attach(document.body)
	  },false)

2：使用 touchstart 事件替代 click 事件：由于 touchstart 事件是在用户触摸屏幕时立即触发的，可以使用它来替代 click 事件。使用 touchstart 事件可能会导致一些其他问题。

passive 参数设置为 true，告诉浏览器该事件监听不会调用 preventDefault() 方法。这可以帮助浏览器更早地处理事件，从而减少点击延迟


element.addEventListener('touchstart', touchStartHandler, { passive: true });

3：CSS 触摸样式的使用：为了增强用户体验，可以使用 CSS 触摸样式（如 :active 伪类）来给点击元素添加反馈效果，使用户感知到点击的即时响应

touch-action：用于指定元素在触摸操作中的行为，manipulation，可以告诉浏览器不需要进行双击缩放和手势识别，从而消除点击延迟

element {
  touch-action: manipulation;
}

will-change 用于提前告诉浏览器某个元素将要发生的变化，帮助浏览器优化渲染和动画效果。将 will-change 设置为 transform 或 opacity 可以帮助消除点击延迟

element {
  will-change: transform;
}

共0条评论遵守法律,文明用语,共同建设文明评论区

暂无评论，快来发表第一条评论吧~

目录收起↑