1.6.0 移除移动端点击事件延迟

1.6.1 double tap to zoom

double tap to zoom (双击缩放)
当用户点击屏幕以后,浏览器不能直接判断用户是点击操作,还是双击缩放,因此浏览器的做法是等待300ms来判断用户是进行了什么操作。

交互的响应速度是移动端的用户体验的要素,专门的网站做过测试结果:交互超过100ms便认为是卡顿。

解决方案

关于解决方案网上有很多做法,总结几种亲测可用的方法。

  • 禁用缩放
  <meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>

完全禁用缩放可以快速有效的解决这个问题

  • css touch-action
	div{
		touch-action:none|manipulation
	   }

如果需求要进行页面缩放 又要解决这个问题我们可以给对应的元素加上touch-action属性

FastClick.attach(document.body);

引入库文件之后只需要在页面初始化事件中应用fastclick,便可以使用,解决方案的源码大致方案是:对页面的document.body上绑定了click以及指针(touchstart,touchend,touchcancel)事件,当用户触发点击事件以后,会冒泡到document.body上,这里做的事情有两件:记录下来事件并发送自定义click事件在控件上并触发;阻止原来的点击事件。

猜你喜欢

转载自blog.csdn.net/h774140913/article/details/84032670