touch和click

前端开发中,触摸事件和点击事件随着技术的发展,我们可以在同一台设备上同时需求两者同时存在。所以我们要对两者之间的关系和现代浏览器对其的支持情况要有一定的认识。

千万不要试图去通过js来判断设备是否支持触摸或者两者都支持。

模拟的click事件有300ms的延迟

在手指交互的设备上,如果仅仅绑定了click事件是会有问题。因为触屏设备模拟的click事件有内建的300ms的延迟。实际上,是因为浏览器需要等待来判断你是否正在做一个双击操作。而双击操作会缩放屏幕。这300ms的时延是一个用户可感知的延迟,会带来极差的用户体验。

解决的方案
  • 如果页面不支持缩放,浏览器就会取消这个延迟。所以比较快捷的方案就是添加meta标签去控制缩放,都可以取消延迟。
<meta viewport="user-scalable=no">或者
<meta viewport="widht=device-width">

但是user-scalable=no禁止了所有的缩放,包括点击缩放和其他方式,这意味着如果你想使用缩放来给老人提供良好的体验的计划要泡汤了,至少是这样的。

  • 同时绑定click和touchstart事件,可以保证触屏设备尽快地响应touchstart,同时可以支持其他所有设备,因为click事件有广泛的兼容性。但是你必须调用preventDefault方法防止事件处理函数被调用多次。

Pointer事件:一个囊括鼠标鼠标、触摸及其他

随着IE10,微软带来了pointer事件来处理用户输入。不过因为各位巨擎的不和导致现在各种浏览器对它的兼容做的很差,其他pointer正式面世的那一天。

欢迎大家留言补充,提出批评!

猜你喜欢

转载自blog.csdn.net/knox_noe/article/details/84258796