移动端的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. for 循环练习题

    X3 * 6528 = 3X * 8256X为一个数字 填入一个数字 使等式成立 for (var x=1;x<=9&&x>0;x++) { if ((x*10+3)*65 ...

  2. VMWare虚拟机移动

    1.  背景: 虚拟机:VM3 原安装路径:C:\Users\Administrator\Documents\Virtual Machines 移动到目标路径:D:\Virtual Machines ...

  3. 使用DOM解析XML文档

    简单介绍一下使用DOM解析XML文档,解析XML文件案例: <?xml version="1.0" encoding="UTF-8"?> -< ...

  4. java中的位运算及移位运算

    为了方便对二进制位进行操作,Java给我们提供了以下四个二进制位操作符: &    按位与 |     按位或 ^    按位异或 ~    按位取反 Java中有三个移位运算符: 左移:&l ...

  5. HTML编辑器ASP.NET

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="kindeditor.aspx. ...

  6. python PIL图像处理-生成图片验证码

    生成效果如图: 代码 from PIL import Image,ImageDraw,ImageFont,ImageFilter import random # 打开一个jpg图像文件: im = I ...

  7. 【剑指Offer】53、表示数值的字符串

      题目描述:   请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100", "5e2", "-123",&q ...

  8. 【剑指Offer】17、树的子结构

      题目描述:   输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构)   解题思路:   要查找树A中是否存在和树B结构一样的子树,我们可以分为两步:第一步, ...

  9. 【剑指Offer】13、调整数组顺序使奇数位于偶数前面

      题目描述:   输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变.   解题思 ...

  10. Nginx服务(端口80)

    Nginx安装: 一.编译安装 1.安装相应软件 yum install pcre pcre-devel openssl openssl-devel -y 2.检查: rpm -aq pcre pcr ...