Teal TealUI

触屏:鼠标事件延时触发

在触屏设备上,当用户触击一个按钮时,会依次触发以下事件:

touchstart → touchmove → touchend → (等待约 300ms 后) → mousemove → mousedown → mouseup → click

click 等鼠标事件被延时触发,主要原因是浏览器为了确认用户是想点击元素还是想快速触摸屏幕两次以缩放网页。 对于那些试图模拟原生 APP 的单页应用来说,延时触发会让用户觉得应用卡钝。

解决方案一(推荐):设置 CSS touch-action 属性

a {
    touch-action: manipulation;
}

此方法只有最新浏览器支持。 但由于不影响功能,可以忽略低版本浏览器的兼容问题。 全局样式组件已内置此样式。

解决方案二:禁用网页缩放

<meta name="viewport" value="..., user-scalable=no">

多数浏览器会在网页禁止缩放后自动禁用延时。

解决方案三:使用触摸事件代替鼠标事件

可使用现成组件,如 DOM 处理FastClick 组件。

另参考