移动端的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循环的嵌套)

    package com.zuoye.test;//打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,//其各位数字立方和等于该数本身.//例如: ...

  2. Eclipse之注释部分代码

    有时为了调试,部分代码需要注释掉,如果一行一行的加注释符特别麻烦. 一.快捷键:ctrl+/ 选择需要注释的部分,点Ctrl+/,这段代码前,自动加注释语. 取消注释也是按Ctrl+/ 步骤: 选择需 ...

  3. php实现非对称加密

    <?php /** * 使用openssl实现非对称加密 * * @since 2015-11-10 */ class Rsa { /** * 私钥 * */ private $_privKey ...

  4. Uoj #274. 【清华集训2016】温暖会指引我们前行 LCT维护边权_动态最小生成树

    Code: 行#include<bits/stdc++.h> #define ll long long #define maxn 1000000 #define inf 100000000 ...

  5. loadrunner录制不了浏览器

    Loadrunner11.0启动WebTours之总结1 第一次安装LR11时,安装安组件后没有对电脑进行重启,直接安装的LR112 安装完毕LR后,录制脚本时发现不能启动IE11.百度发现LR支持I ...

  6. 一键安装LNMP(适合centos7)

    1.准备工作,下载源码包 wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2.12-x86_64.tar ...

  7. rsync增量同步标志位详细解释

    rsync非常强大,下面是我用rsync做目录备份时用到的参数: rsync -ruPi -plEt /home/op/photo/ /remote_backup/photo/ --dry-run - ...

  8. PHP学习总结（12）——PHP入门篇之变量

    一.什么是变量 变量是用于存储值的,我们命令服务器去干活的时候,往往需要产生一些数据,需要临时性存放起来,方便取用.我们也可以理解为,变量就像一个购物袋,我们可以用来装苹果.榴莲(当然也可以用来装玫瑰 ...

  9. 组合数性质求K个数选取i*j个数分成j组的方案数

    分析:设方案数为ANS,C代表组合数: ANS=(C[K,I]*C[K-I,I][K-2*I,I]*...*C[K-(J-1)*I,I])/(J!); 也即: ANS=C[K,I*J]*(C[I*J, ...

  10. redis-linux上安装redis

    单机版本 因为redis是c++写的,我们首先需要安装c++环境 1.在linux安装c++源码编译器 需要联网 linux输入yum -y install gcc gcc-c++ 2.官网下载red ...