移动端点击事件的延迟

最新推荐文章于 2023-10-05 14:06:36 发布
最新推荐文章于 2023-10-05 14:06:36 发布
阅读量509 收藏 1
点赞数
分类专栏： 移动端 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49078296/article/details/124578046
版权

为什么会有延迟

移动端点击时间有300ms的延迟，是因为移动端有双击缩放的操作，浏览器在click之后要等待300ms，根据用户是否有下一次点击来判断这个操作是不是双击。

解决方法

  • 通过meta标签禁用网页的缩放
<meta name="viewport" content="user-scalable=no">
  • 通过meta标签讲网页的viewport设置为ideal viewport（理想视口，用户不用缩放和滚动条就能查看到整个页面）
  • 调用js库，例如：FastClick
徐_三岁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端 click 300ms 延迟，如何解决
m0_38066007的博客
05-22 616
背景 智能手机开始流行的前期，浏览器可以点击缩放（double tap to zoom）网页。这样在手机上就可以浏览 PC 网页 浏览器为了分辨 click 还是“点击缩放”，就强行把 click 时间延迟 300ms 触发。 初期解决方案 [FastClick](https://www.npmjs.com/package/fastclick) 专门用于解决这个问题。 // FastClick 使用非常简单 window.addEventListener( "load", function(
js--移动端点击事件延迟问题
苛性钠的博客
02-25 450
1.描述：移动端页面若没有加视口标签，则点击事件会比触摸结束事件晚300ms左右触发。 2.原因：因为在没有视口标签的情况下，允许用户双击缩放；而为了兼容双击事件，判断300ms以内点击两次为双击事件，点一次为单击事件。 解决方案 1.加视口标签 原理：加视口标签之后，禁止用户双击缩放 2.使用touch事件来模拟点击事件 function tap(ele,callBack){ // 定义开关--用于判断是否触发了click事件 var flag=true; .
解决Vue 移动端点击出现300毫秒延迟的问题
12-28
1. 安装模块 cnpm install fastclick -S 2. 在main.js中引入，并绑定到body import FastClick from ‘fastclick’ FastClick.attach(document.body); 当better-scroll和 fastclick冲突的不能点击的时候： <slider> <div v-for=item> <a> <!-- 当better-scroll和 fastclick冲突的不
iOS开发问题之：UIButton点击延迟
vkooy的博客
12-19 658
有时候放在屏幕边缘的Button会出现延迟响应TouchDown事件的问题（表现为手指按下后有很明显的一段时间延迟后才响应）。最典型的场景就是做类似微信的在屏幕底部一个按住说话的语音录入按钮。 出现该问题的原因是，在屏幕边缘处，有一些系统手势的存在，比如在屏幕底部有上拉划出系统菜单的手势。所以当你按住Button，在响应TouchDown事件前，系统会缓冲一段时间来判断你是想上拉划出系统菜单还是响...
JavaScript 移动端点击事件延迟问题
m0_55201788的博客
01-29 1075
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)页面。解决方案: 1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。 <meta name="viewport" content="user-scalable=no"> 2.利用touch事件自己封装这个事件解决300ms延迟。 原理就是︰ 1.当我们手指触摸屏幕，记录当前触摸时间 2.当我们手指离开屏幕，用离开的时间减去触摸的时间 3.如果时间小于150ms
js移动端点击后延迟怎么办？
有问题可关注公众号：前端研究院 后台输入问题回复
12-03 640
移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，需要300ms后才生效，导致多数用户感觉移动设备上基于HTML的web英语解密响应速度慢，甚至有时候会影响一些业务逻辑的处理 为什么会存在延迟？ 移动端浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕快速点击两次，可以看到内容...
移动端事件300ms延迟解决
灵魂学者的博客
06-09 1896
有移动端与PC端的项目开发，那么移动端和PC端开发上是存在差异的，比如 click 事件的300ms 延迟，即移动Web页面上的click事件响应都要慢上300ms，移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容；这样做的原因是为了确定用户是“单机”还是“双击”，safari(macOS浏览器) 需要通过300ms的延迟来判断！关于 “300毫秒的延迟” 是一个默认的规范，首先先来了解这个300ms的延迟是怎么样的!
移动端点击延迟的原因与解决方案
subsistent的博客
02-16 482
我们可以通过以下标签来设置视口宽度为设备宽度。因为双击缩放主要是用来改善桌面站点在移动端浏览体验的，而随着响应式设计的普及，很多站点都已经对移动端坐过适配和优化了，这个时候就不需要双击缩放了，如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。
如何解决移动端click事件的延时问题？
最新发布
zy1992As的博客
10-05 512
FastClick 插件是由FT Labs(英国金融时报实验室)团队开发的JavaScript库，它简单易用，容易上手，解决了click事件在移动端触发时有大约300ms延时的问题。随着移动端网页的流行与普及，用户对网页性能有了更高的要求，而在移动端使用click事件会出现延时，这会影响用户的体验。上述代码中，FastClick.attach()方法的参数可以是任意的DOM元素，在这里使用document.body表示将body元素中的所有子元素都绑定FastClick事件，解决移动端click。
移动端点击（click）事件延迟问题的产生与解决方法
热门推荐
xjun0812的博客
03-22 2万+
移动端浏览器点击事件300毫秒延迟问题的避免方法
fastclick移动端点击延迟专用
12-05
移动端点击延迟专用
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过<li v-tap="{fn:vueTouch,active:0}">全部</li> fn：vueTouch调用。
百度 touch js 解决 移动端click点击事件
07-28
百度 touch js 百度touch.js可以说是Web移动端touch点击事件不错的解决方案，搭配zepto.js或者jQuery使用起来解决了移动端click点击事件300ms的延迟问题。
fastclick 解决移动端click事件延迟300ms和点击穿透问题
Kaite_han的博客
10-19 1万+
一、移动端click点击事件300ms延迟介绍 在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。 300ms延迟由来 07年，苹果公司发布首款Iphone前夕，遇到一个问题：当时的网站都是为大屏设计，手机屏幕太小无法正常浏览，于是苹果工程师
移动端click事件延迟300ms到底是怎么回事，该如何解决？
wfly blog
09-25 623
问题由来 双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，...
移动端click事件300ms延迟
xiangxiongfly
04-28 1374
在移动端中，点击屏幕的按钮会产生200~300ms的延迟响应，会导致用户认为页面卡顿问题。
关于移动端的click时间有延迟的问题（300ms延迟）
夏天龙的博客
09-01 2431
首先这个问题百度google一大堆，这里不详细阐述，只提供一种解决方案。 还是先说一下问题的由来： 问题由来 这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。 这当中最出名的，当属双击缩放(double tap t
移动端延迟300ms的来源和点击穿透以及解决方案
qq_53818683的博客
03-26 1173
点击穿透问题是指在移动设备上，当一个元素的点击事件被触发后，浏览器会在 300 毫秒后才会触发对该元素的点击事件，而在这 300 毫秒内，如果用户快速点击了其他元素，那么这些元素的点击事件也会被触发。点击延迟的引入是为了解决在移动设备上双击缩放和单击操作的冲突问题。要解决点击穿透问题，可以使用FastClick库来消除浏览器默认的 300 毫秒点击延迟，并在元素的点击事件被触发时阻止事件冒泡。需要注意的是，禁用双击缩放可能会影响到一些需要使用双击的操作，例如双击输入框选中文本、双击地图放大等。
vue适配移动端点击事件
07-28
这些库可以解决移动端点击事件触发延迟的问题。你可以通过npm安装这些库，并在main.js中引入和初始化，例如： ```javascript import FastClick from 'fastclick'; FastClick.attach(document.body); ``` 4. 最后，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值