移动端的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. CNN结构：用于检测的CNN结构进化-分离式方法

    前言: 原文链接:基于CNN的目标检测发展过程       文章有大量修改,如有不适,请移步原文. 参考文章:图像的全局特征--用于目标检测 目标的检测和定位中一个很困难的问题是,如何从数以万计的候选 ...

  2. 需要知道的TCP/IP三次握手

    TCP/IP三次握手是TCP协议中比较重要的一个知识点,但是在很多博客中看到的三次握手的过程图很多都不是很正确.我在google找到了一篇写的非常不错的介绍TCP/IP技术文章期中就有三次握手的讲解, ...

  3. React Native未来导航者：react-navigation 使用详解

    该库包含三类组件: (1)StackNavigator:用来跳转页面和传递参数 (2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:侧滑 ...

  4. 单链表每k个节点为一组进行反转（最后不满k个时不反转）

    public class LinkReverse2 { public static Node mhead=null; public static Node mtail=null; public sta ...

  5. spotlight on mysql 监控

    . 安装 下载地址:https://pan.baidu.com/s/1qYi3lec 官网地址——https://www.quest.com/common/registration.aspx?requ ...

  6. Sql Server 查询性能查看

    dbcc dropcleanbuffers --清除buffer pool里的数据页面 dbcc freeproccache --清除memtoleave和buffer pool里的执行计划内存 se ...

  7. 【CF1173D】NanuuAndCircle

    题目链接:http://codeforces.com/contest/1173/problem/D 赛场上弱爆了的小菜鸡(本人),怎么也没想到这道看起来近似于神仙计数/生成函数的题正解竟然如此简洁. ...

  8. C#第五节课

    switch语句 using System;using System.Collections.Generic;using System.Linq;using System.Text;using Sys ...

  9. codeforces 244B-Undoubtedly Lucky Numbers 搜索

    题意:给你一个n,求不大于n的并且仅由两种或者一种数字组成的数的个数.(有点绕,,简单点就是,看看小于等于n点数中,,有多少数字只有一种数字,或者有两种数字组成) “哎,自己还是太菜了,训练的时候只做 ...

  10. bit ( 比特 )和 Byte（字节）的关系

    一.存储单位的bit 和 Byte1.bit(比特)bit也就是我们不一定听说过的比特,大名鼎鼎的比特币就是以此命名的.它的简写为小写字母 “b” .作为信息技术的最基本存储单元,因为比特实在太小了, ...