背景

智能手机开始流行的前期，浏览器可以点击缩放（double tap to zoom）网页。这样在手机上就可以浏览 PC 网页

浏览器为了分辨 click 还是“点击缩放”，就强行把 click 时间延迟 300ms 触发。

初期解决方案

[FastClick](https://www.npmjs.com/package/fastclick) 专门用于解决这个问题。

// FastClick 使用非常简单
window.addEventListener( "load", function() {FastClick.attach( document.body )
}, false )

它的内部原理是

- 监听 `touchend` 事件（`touchstart` `touchend` 会先于 `click` 事件被触发）

- 通过 [DOM 自定义事件](https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent) 模拟一个 click 事件

- 把 300ms 之后触发的 click 事件阻止掉

现代浏览器的改进

- Chrome 32+ on Android

- iOS 9.3

<meta name="viewport" content="width=device-width" />

有这个属性：width=device-width，浏览器就不会再有 300毫秒的延迟

Ret

移动端 click 300ms 延迟，如何解决相关推荐

fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 -- 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
滑动翻页效果实现和移动端click事件问题
前述本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
移动端300ms延迟解决的几种方法；
方案一:禁用缩放当HTML文档头部包含如下meta标签时: <meta name="viewport" content="user-scalable=no&quo ...
移动端的click事件延迟触发的原理是什么？如何解决这个问题？
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟会出现点透现象在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
移动端300ms延迟_如何解决移动端300ms延迟的问题
声明一下:300ms只是行业内部的统称,其实应该在300ms-350ms之间的一个数值. 移动端300ms延迟的前世今生背景: 2007 年初.苹果公司在发布首款iPhone前夕,遇到一个问题:当时 ...
移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
fastclick：处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...

移动端 click 300ms 延迟，如何解决

背景

初期解决方案

现代浏览器的改进

Ret

移动端 click 300ms 延迟，如何解决相关推荐

最新文章

热门文章