移动端的click事件延迟触发的原理是什么？如何解决这个问题？

  • 原理 ：移动端屏幕双击会缩放页面 300ms延迟
  • 会出现点透现象

    在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，因为有300ms延迟,所以这个按钮正下方的内容也会执行点击事件（或打开链接）。这个被定义为这是一个“点透”现象
  • 解决方案

    • 视口标签中禁止用户缩放

      <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    • 利用touch事件封装事件解除300ms延迟

    • 使用插件 fastclick插件解决300ms延迟

      官网:https://github.com/ftlabs/fastclick lib文件----fastclick

移动端的click事件延迟触发的原理是什么？如何解决这个问题？的更多相关文章

  1. 解决在移动端上 click事件延迟300 毫秒的问题 fastclick.js

    1 为什么会发生延迟300毫秒的问题 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了FastClick ...

  2. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  3. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  4. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  5. 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  6. 关于移动端的Click事件

    在移动端执行Click事件,通常情况出现有300毫秒的延迟,为防止这种不必要的延迟效果,我们可以换种方式来实现,同样达到快速执行Click事件的效果. 先了解一下移动端Click的执行顺序: touc ...

  7. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  8. iphone上click事件不触发的问题解决。

    iphone上click事件不触发的问题解决. //在ID为jsProvince上有这么一个事件: $('body').on('click', '#jsProvince', function(e){ ...

  9. EasyUi中的datagird中a标签的click事件无法触发？（已解决）

    ***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...

随机推荐

  1. C语言笔记(二)

    注释 编译器会用空格代替代码中原来的注释,并先于预处理指令执行/*…*/ 这种形式的注释不能嵌套只要斜杠(/)和星号(*)之间没有空格,都会被当作注释的开始.例如这样:y = x/*p; \ 是一个接 ...

  2. 三维重建面试13X：一些算法试题-今日头条AI-Lab

             被人牵着鼻子走,到了地方还墨明棋妙地吃一顿砖头.今日头条AI-Lab,其实我一直发现,最擅长的还是点云图像处理,且只是点云处理. 一.C++题目   New 与Malloc的区别: ...

  3. Reducing the Dimensionality of Data with Neural Networks：神经网络用于降维

    原文链接:http://www.ncbi.nlm.nih.gov/pubmed/16873662/ G. E. Hinton* and R. R. Salakhutdinov .   Science. ...

  4. 【JSP】简单登陆界面

    学生登陆查询系统 1 程序的主要功能及特点 实现一个登录界面的基本功能,具体要求: 登录界面login.jsp含有表单,用户能够输入用户名和密码,并提交表单给verify.jsp. Verify.js ...

  5. js取最值：

    取最值是很常见的一种运算,各个语言都会遇到这个问题.Js中,如果简单的进行取最值,完全没必要自己写一个比较函数,原生的js就提供了方法.这些方法都属于Math 对象(引用w3c:Math 对象并不像 ...

  6. ubuntu18.0安装RabbitMQ

    RabbitMQ是一个消息队列,用于实现应用程序的异步和解耦.生产者将生产消息传送到队列,消费中从队列中拿取消息并处理.生产者不用关心是谁来消费,消费者不用关系是谁在生产消息,从而达到解耦的目的.本文 ...

  7. 【剑指Offer】54、字符流中第一个不重复的字符

      题目描述:   请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字 ...

  8. CentOS平滑更新nginx版本

    目前使用的nginx版本是1.4.4,平滑升级到nginx1.10.1,具体升级操作流程如下: 1.备份当前使用的nginx程序目录 tar -zcvf ./nginx1.4.4bak.tar.gz ...

  9. python打印日历

    #未优化的代码 1 #输出日历 def print_calendar(year,month,date = 1): month_dict = {':'July', ':'December'} #数字月份 ...

  10. 2018ICPC南京

    可能上一次秦皇岛拿了银,有了偶像包袱? 打的时候感觉状态不是很好. 第一题,让你每次将连续一段区间的石头都拿掉.. 然后让你做个博弈. 橘子一顿分析,认为k+1的倍数都是输. 这时,我们以及默认i+1 ...