移动端点击事件延迟300毫秒

最新推荐文章于 2020-07-16 15:30:49 发布
最新推荐文章于 2020-07-16 15:30:49 发布
阅读量108 收藏
点赞数
文章标签： javascript xhtml ui ViewUI
原文链接：http://www.cnblogs.com/telwanggs/p/6477571.html
版权

快速响应是所有UI都需要注意的一点，研究证明:当延迟超过100毫秒，用户就能感受到界面的卡顿。然而出于对手指触摸滑动的区分，移动端页面对于触摸事件会有300毫秒的延迟，导致多数用户感觉移动设备上基于html的web应用界面响应速度慢。

例1：在手机端运行该页面，点击按钮，会明显感觉比较慢

 

[html]  view plain  copy
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title></title>  
  4.     <style>  
  5.         *  
  6.         {  
  7.             margin: 0;  
  8.         }  
  9.         body  
  10.         {  
  11.         }  
  12.         .button  
  13.         {  
  14.             background-color: #3d3d3d;  
  15.             border: 0px;  
  16.             height: 80px;  
  17.             width: 80%;  
  18.             font-size: 50px;  
  19.             margin: 10% 0% 0% 10%;  
  20.             color: #fff;  
  21.         }  
  22.         .fu  
  23.         {  
  24.             min-height: 100%;  
  25.             min-width: 100%;  
  26.             background-color: Black;  
  27.             background: rgba(0,0,0,0.4);  
  28.             position: absolute;  
  29.             top: 0;  
  30.             text-align: center;  
  31.             display: none;  
  32.         }  
  33.         .ts  
  34.         {  
  35.             margin: 8% auto;  
  36.             width: 400px;  
  37.             height: 400px;  
  38.             top: 59%;  
  39.             background-color: #fff;  
  40.             text-align: center;  
  41.         }  
  42.     </style>  
  43.     <script src="jquery-1.7.2.js" type="text/javascript"></script>  
  44.     <script>  
  45.         function xian() {  
  46.             $(".fu").show().hide(350);  
  47.         }  
  48.     </script>  
  49. </head>  
  50. <body>  
  51.     <div>  
  52.         <div class="but">  
  53.             <input class="button" type="button" value="点击我" οnclick="xian()" /></div>  
  54.         <div class="fu" οnclick="yc()">  
  55.             <div class="ts">  
  56.                 我是浮层  
  57.             </div>  
  58.         </div>  
  59.     </div>  
  60. </body>  
  61. </html>  

 

例2：使用了 FastClick是一个非常方便的库,在移动浏览器上发生介于轻敲及点击之间的指令时,能够让你摆脱300毫秒的延迟,而且使用起来非常方便

 

[html]  view plain  copy
 
  1. window.addEventListener('load', function () {  
  2.            FastClick.attach(document.body);  
  3.        }, false);  

加入以上代码即可

 

 

 

[html]  view plain  copy
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title></title>  
  4.     <style>  
  5.         *  
  6.         {  
  7.             margin: 0;  
  8.         }  
  9.         body  
  10.         {  
  11.         }  
  12.         .button  
  13.         {  
  14.             background-color: #3d3d3d;  
  15.             border: 0px;  
  16.             height: 80px;  
  17.             width: 80%;  
  18.             font-size: 50px;  
  19.             margin: 10% 0% 0% 10%;  
  20.             color: #fff;  
  21.         }  
  22.         .fu  
  23.         {  
  24.             min-height: 100%;  
  25.             min-width: 100%;  
  26.             background-color: Black;  
  27.             background: rgba(0,0,0,0.4);  
  28.             position: absolute;  
  29.             top: 0;  
  30.             text-align: center;  
  31.             display: none;  
  32.         }  
  33.         .ts  
  34.         {  
  35.             margin: 8% auto;  
  36.             width: 400px;  
  37.             height: 400px;  
  38.             top: 59%;  
  39.             background-color: #fff;  
  40.             text-align: center;  
  41.         }  
  42.     </style>  
  43.     <script src="fastclick.js" type="text/javascript"></script>  
  44.     <script src="jquery-1.7.2.js" type="text/javascript"></script>  
  45.     <script type="application/javascript">  
  46.         window.addEventListener('load', function () {  
  47.             FastClick.attach(document.body);  
  48.         }, false);  
  49.         function xian() {  
  50.      
  51.             $(".fu").show().hide(350);  
  52.         }  
  53.     </script>  
  54. </head>  
  55. <body>  
  56.     <div>  
  57.         <div class="but">  
  58.             <input class="button" type="button" value="点击我" οnclick="xian()" /></div>  
  59.         <div class="fu" >  
  60.             <div class="ts">  
  61.                 我是浮层  
  62.             </div>  
  63.         </div>  
  64.     </div>  
  65. </body>  
  66. </html>  


例3：可以使用zepto.js的tap事件替代click，Zepto 缺少合适的高度计算函数，在项目开发中发现第三方插件和 Zepto 有冲突，维护多套代码很不容易

转载于:https://www.cnblogs.com/telwanggs/p/6477571.html

dhptkq9465
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue 移动端点击出现300毫秒延迟的问题
10-15
在移动Web开发中，用户经常会遇到点击事件响应速度慢的问题，这主要是由于浏览器为了优化触摸手势识别而引入的300毫秒延迟。这个延迟在用户进行双击操作时是必要的，以避免误触，但在单击操作中就显得多余，降低了...
移动端Html5中百度地图的点击事件
09-22
`click`事件在移动端可能不会被触发，因为浏览器会等待用户可能的双击操作，导致单击事件延迟执行或不执行。因此，开发者通常需要使用触摸事件来模拟点击行为，比如模仿Zepto库中的`tap`事件。 以下是一个简单的...
移动端300毫秒延迟
QAEARQ的博客
07-11 388
npm 安装fastclicknpm install fastclick --savemain.js引入import fastClick from 'fastclick'调用fastClick.attach(document.body)解决问题
移动端的300毫秒延迟问题
weixin_30432179的博客
02-02 81
做过移动端开发的朋友都清楚在移动端，click事件都有大约300毫秒的延迟响应，最开始项目中遇到的点透事件，可把我折磨了好久，后来查了相关资料，才知道是因为click的延迟，最开始解决方案是用touchend事件取代了touch事件，后来总感觉怪怪的，不断的关注这个问题，发现了fastclick这个库。特此记录一下。 由来：是苹果的工程师为了解决“双击缩放”问题，将单击和双击区分开；后鉴于...
移动端Click300毫秒点击延迟
tc216的博客
10-08 517
移动端Click300毫秒点击延迟
Vue中解决移动端点击300毫秒延迟的问题
weixin_30715523的博客
02-05 190
1. 安装模块 cnpm install fastclick -S 2. 在main.js中引入，并绑定到body 1 import FastClick from 'fastclick' 2 3 FastClick.attach(document.body); 当better-scroll和 fastclick冲突的不能点击的时候： 1 <slider&gt...
移动端300毫秒延迟解决
weixin_41675013的博客
07-01 500
https://cloud.tencent.com/developer/article/1379785 第一种： 禁止缩放 <meta name="viewport" content="user-scalable=no" /> 或者 html { touch-action: manipulation; } 第二种fastClick
移动端html5模拟长按事件的实现方法
09-22
1. **放弃click事件**：在触摸设备上，click事件会有300ms的延迟，这是为了等待用户可能的双击操作。因此，我们不能依赖click事件来区分单击和长按。 2. **使用touchstart和touchend事件**：当用户触碰屏幕时，会...
移动web开发之touch事件实例详解
08-28
这意味着在单击触摸事件（touchend）触发后，浏览器会等待300毫秒才执行点击行为。这对于需要即时响应的交互设计来说可能会造成延迟感。为解决这个问题，开发者可以使用`FastClick`库或者其他技术来消除这一延迟。 ...
移动端click事件延迟300ms该如何解决
weixin_30267691的博客
01-12 50
window.addEventListener("load",function() { FastClick.attach( document.body ); },false); 连接地址http://www.cnblogs.com/chaojidan/p/4517895.html 和https://www.awesomes.cn/repo/ftlabs/fastclick 转...
移动端 300毫秒延迟
小白向前冲！
05-10 1490
移动端Click300毫秒点击延迟 来源： 07年，当时的网站都是为大屏幕设备所设计，为了实现对普通网页更好的体验，苹果的工程师对 iPhone 这种小屏幕浏览桌面端站点，定义了一个双击缩放(double tap to zoom) 的功能，​原理是，当你点击一次之后，在300ms内检测是否再有一次点击，如果有的话，就会缩放页面；否则的话就是一个单击行为。 解决方案： （1）设置不能...
vue移动端解决移动端300毫秒延迟问题
weixin_43204255的博客
09-21 2924
1.打开终端，输入命令 npm install fastclick --save 查看package.json里面有没有 2.在main.js里面引入fastClick import fastClick from 'fastClick' fastClick.attach(document.body)
移动端300ms点击延迟和点击穿透问题
wocaonima332的博客
07-18 1436
一、移动端300ms点击延迟 一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。 那么，移动
300 毫秒点击延迟的来龙去脉
StarkCGI_的专栏
10-16 2279
原文地址：What Exactly Is..... The 300ms Click Delay 快速响应是所有 UI 实现的重中之重。研究表明，当延迟超过 100 毫秒，用户就能感受到界面的卡顿。 然而，出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟，导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。 本文主要讨论上述延时的来历，浏览器生产商
如何解决移动端点击时300毫秒延迟的问题
qq_45120404的博客
11-11 531
##方法一，在标签内添加标签使页面禁止缩放（当然你强制缩放还是可以进行缩放操作的） <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> ##方法二，用zepto.js！也可以实现 ###官网是这个ze...
300毫秒延迟解决方案（vue）
Eno_Lin的博客
07-16 925
关于300毫秒的双击以及单击的话早些是iphone设计了双击放大显示的功能，如果用户一次点击后300ms内没有其他操作，则认为是个单击行为；否则为双击放大行为。vue特别简单，做个记录后面方便找资料，main文件进行引入 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值