移动端web界面click时间300s延迟的问题

众所周知 移动设备上web界面,click事件有300s的延迟,是因为。。。。。(很多巴拉巴拉)
影响延迟主要是因为,事件响应的顺序是

  1. ontouchstart 当手指触摸手机屏幕时发生
  2. ontouchmove 当手指在屏幕上滑动时连续触发,通常我们在滑屏界面,会调用ever.preventDefault组织默认情况,防止页面滑动
  3. ontouched 当手指离开屏幕时触发
  4. click 点击事件

所以如何解决移动端web界面事件延迟以及点击穿透方案?

浏览器的开发商的解决方案

方案一: 禁止缩放

<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>

方案二:更改默认的可视宽度

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

** 第三方的解决方案**
FastClick
githup:https://github.com/ftlabs/fastclick/

用法:

  1. 头部引入
  2. <script type="application/javascript">
    window.addEventListener('load', function () {
    FastClick.attach(document.body);
    }, false);
    </script>

结束语:当然不止这些解决办法,但足够自己用了。待完善~~~

推荐阅读更多精彩内容

  • liusihao 2016-12-21 移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移...
    c563f88c16ec阅读 21,602评论 2 34
  • 一、移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300...
    tsyeyuanfeng阅读 31,169评论 8 69
  • 300ms延迟由来 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设...
    cfighter阅读 680评论 0 0
  • JQuery的源码看过吗?能不能简单概况一下它的实现原理? jQuery.fn的init方法返回的this指的是什...
    过往的雨阅读 1,198评论 0 10
  • 以前听到前辈们说移动端尽量不要使用click,click会比较迟钝,能用touchstart还是用touchsta...
    极乐君阅读 435评论 0 2
  • 不知是性格使然,还是自身缺乏安全感,我不喜欢与人交际,也不喜欢嘈杂、热闹的环境,时刻想有一个安静的角落容我静静的看...
    伽蓝x阅读 1,865评论 4 11
  • 《你的名字》12月2日,与你相遇… 等,等,等……怎一个等字了得?等了那么久,简直就是在忍耐!!!早在几个月前电影...
    筱念凉阅读 477评论 13 10
  • 我没在现场也不在线上,我是回听的,差点错过这么重要的事,看到老大的推文说要交作业的,下班后赶紧找资料来,一听就是几...
    娜么好玩阅读 192评论 6 4
  • 我梦到我被判了死刑,似乎自己也觉得这个判决也是有道理的,好像第二天就要执行了,然而人身竟然是自由的,可以任意走动,...
    焕歌儿阅读 317评论 0 3
  • 1.环境 1、系统CentOS 7 2、数据库Mysql 5.7 2.准备工作 1、从MySQL官网上下载压缩包到...
    陈_志鹏阅读 5,746评论 1 6