JavaScript:click & touchstart

前端之家收集整理的这篇文章主要介绍了JavaScript:click & touchstart前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

click 为什么有 300ms 延时

移动端浏览器为了实现双击放大功能,对第一次 click 进行延时处理,如果 300ms 内再次点击,则放大当前页面,否则触发点击事件 click

怎么解决 300ms 延时问题

这里有几个解决方

一、当前页面禁用放大

因为 300ms 是为了实现页面放大,所以禁止页面放大,能直接去掉点击延迟

二、使用 touchstart 替代

点击事件的触发顺序是:

touchstart -> touchmove -> touchend -> click

因为 touchstart 是在事件的最前端,可以实现点击时立即触发

但是
touchstart 的触发条件并没有 click 严谨

  • touchstart:手指触摸开始即能触发、多指触摸会触发多次
  • click:手指触摸开始,且手指未曾在屏幕上移动,且在这个 dom 上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短才能触发

所以 touchstart 并不能完全替代 click

三、模拟点击

常见模拟点击的库有 zepto 的 tap 和 fastclick
zepto 的 tap 有点穿问题
fastclick 最完美

参考资料

  1. 《在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意?》,佑界,
原文链接:https://www.f2er.com/js/415883.html

猜你在找的JavaScript相关文章