click事件延迟300ms,处理方法-----FastClick

2024-06-03 04:39:47

下载地址：https://github.com/ftlabs/fastclick

http://amazeui.org/1.x/javascript/fastclick/

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？因为它想看看你是不是要进行双击（double tap）操作。

不应用 FastClick 的场景

1.桌面浏览器；

2.如果 viewport meta 标签中设置了 width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；

<meta name="viewport" content="width=device-width, initial-scale=1">

3.viewport meta 标签如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。

4.IE10 中，可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放（参考文章）

当使用了FastClick后，将所有的click事件延迟300ms都恢复为0。

使用方法

TODO: 修改使用接口

1.

window.addEventListener('load', function() {FastClick.attach(document.body);
}, false);

2.Zepto.js:

$(function() {FastClick.attach(document.body);
});

var attachFastClick = require('fastclick');
attachFastClick(document.body);

转载于:https://www.cnblogs.com/shimily/articles/4933882.html

click事件延迟300ms,处理方法-----FastClick相关推荐

fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 -- 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
移动端的click事件延迟触发的原理是什么？如何解决这个问题？
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟会出现点透现象在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
点击延迟_解决移动端浏览器点击延迟300ms的问题——FastClick用法
为什么要使用FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick. 项 ...
fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
设计方案--移动端延迟300ms的原因以及解决方案
一.前言移动端浏览器提供一个特殊的功能:双击(double tap)缩放. 二.移动端延迟300ms的原因为什么要用触摸事件?触摸事件是移动端浏览器特有的html5事件. 因为移动端的clic ...
移动端点击延迟300ms传说你听过吗
「 H5开发引发问题」上篇文章刚说了不要把公司当成家,然后这周我就差点把公司当家了,每天回去很晚,总之加班了. 然后在做项目的过程中,发现了一个由来已久的传说, 300ms延迟问题,可能很多同学 ...
Vue根据条件添加click事件
需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑 ...

最新文章

热门文章