移动端click事件延时

在移动端使用click事件会产生300ms的延迟

问题的产生：

移动端存在双击放大的问题，所以在移动端点击事件发生时，为了判断用户的行为（到底是要双击还是要点击），浏览器通常会等待300ms，如果300ms之内，用户没有再次点击，则判定为点击事件，否则判定为双击缩放。

为什么要解决：

线代web对性能的极致追求，对用户体验的高标准，让着300ms的卡顿变得难以接受

如何解决：

1、user-scalable:no 禁止缩放——没有缩放就不存在双击，也就没有点击延迟

2、指针事件：CSS：-ms-touch-action:none 点击后浏览器不会启用缩放操作，也就不存在延迟。然而这种方法兼容性很不好。

3、FastClick库：针对这个问题所开发的轻量级库。FastClick在检测到touchend事件后，会立即触发一个模拟的click事件，并把300ms后真正的click事件阻止掉

用法：

1 window.addEventListener("load",function(){
2 FastClick.attach(document.body);
3 });
4 //虽然可以绑定到更具体的元素，但绑定到body上能使整个应用都受益

当FastClick检测到页面中使用了user-scalable:no或者touch-action:none方案时，会静默退出。棒棒哒！

转载于:https://www.cnblogs.com/dll-ft/p/5875539.html

移动端click事件延时相关推荐

fastclick：处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 -- 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
滑动翻页效果实现和移动端click事件问题
前述本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
移动端click事件无反应或反应慢 touchend事件页面滑动时频繁触发
H5页面的点击事件click 无论在浏览器 iframe还是小程序里面都会出现点击无反应或者反应慢的情况出现所以决定用touchend事件来代替click 但是touchend事件触发比较灵敏在 ...
vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
一般情况下一些框架就自动解决了这个问题一.使用npm安装: npm install fastclick -S 二.用法: 安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效.或 ...
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
《H5 App开发》移动端IOS click 事件响应缓慢的解决方案
造成点击缓慢的原因从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 第一 ...

移动端click事件延时

移动端click事件延时相关推荐

最新文章

热门文章