解决移动端点击事件延迟300ms
来源:互联网 发布:mac上steam游戏装在哪 编辑:程序博客网 时间:2024/05/01 20:29
说明:移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。
以下是历史原因,来源一个公司内一个同事的分享: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。
//解决方案: fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块,tap事件也是为了解决在click的延迟问题
一、tap.js解决方案
<script src="tap.js"></script><div id="container"> <button id="button-1">Click event</button> <button id="button-2">Tap event</button></div><div id="output"></div><script> var container = document.getElementById('container') var button1 = document.getElementById('button-1'); var button2 = document.getElementById('button-2'); var output = document.getElementById('output'); var tap = new Tap(container); button1.addEventListener('click', callback, false); button2.addEventListener('tap', callback, false); function callback (e) { e.preventDefault(); var p = document.createElement('p'); p.textContent = 'event: ' + e.type; output.insertBefore(p, output.firstChild); }</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> * { margin: 0; } body { } .button { background-color: #3d3d3d; border: 0px; height: 80px; width: 80%; font-size: 50px; margin: 10% 0% 0% 10%; color: #fff; } .fu { min-height: 100%; min-width: 100%; background-color: Black; background: rgba(0,0,0,0.4); position: absolute; top: 0; text-align: center; display: none; } .ts { margin: 8% auto; width: 400px; height: 400px; top: 59%; background-color: #fff; text-align: center; } </style> <script src="fastclick.js" type="text/javascript"></script> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="application/javascript"> window.addEventListener('load', function () { FastClick.attach(document.body); }, false); function xian() { $(".fu").show().hide(350); } </script></head><body> <div> <div class="but"> <input class="button" type="button" value="点击我" onclick="xian()" /></div> <div class="fu" > <div class="ts"> 我是浮层 </div> </div> </div></body></html>
- 解决移动端点击事件延迟300ms
- 解决移动端点击事件延迟300ms
- 解决移动端点击事件延迟300ms的问题
- ios移动端点击事件延迟300ms
- 移动端点击300ms延迟问题和解决
- 移动端点击300ms延迟问题和解决
- 移动端点击事件延迟300毫秒
- 移动端点击事件延迟 击透及解决
- 移动端点击穿透和click事件300ms延迟问题
- Jquery 解决移动端onclick事件300ms延迟问题
- Jquery 解决移动端onclick事件300ms延迟问题
- 移动端click事件300ms延迟
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
- 移动端click事件延迟300ms正解大全
- iphone移动端click事件延迟300ms解决方案
- vuejs 移动端解决click 300ms延迟
- 移动端点击(click)事件延迟问题的产生与解决方法
- pc端点击事件和移动端点击事件区别
- Webview点击二次界面js方法不能响应
- Eclipse的Servers视图中无法添加Tomcat6/Tomcat7
- C语言基础 二进制字符串将化为十进制数
- IOS集成ShareSDK社会化分享
- MyEclipse提示An error has occurred的一个解决方法
- 解决移动端点击事件延迟300ms
- 团体程序设计天梯赛-练习集 L2-001. 紧急救援
- RSA算法原理(二)
- 使用PHP生成二维码(PHP QR Code二维码生成类库)http://www.myxzy.com/post-423.html
- C++编程题练习-实数的输出格式(7-2)
- 改变Textview中部分字体的颜色
- USACO 月赛 劣质的草 (重庆一中高2018级信息学竞赛测验2) 解题报告
- Java多线程-线程的同步与锁
- 输油管道 (Standard IO)