因为历史原因,移动端点击事件会有300ms延迟,来判断用户是连续双击缩放还是点击跳转。即如果300ms内连续点击两次,则会理解为对页面进行缩放操作(当然前提是移动端页面设置为可缩放的);在一次点击之后如果300ms内没有再次发生点击事件,那么系统会默认为跳转事件,点击300ms后进行跳转。所以移动端正常跳转页面会有300ms延迟问题。

使用fastclick.js可以屏蔽移动端的300ms问题。引入fastclick.js插件然后添加下边代码。github地址》》》

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

如果同时使用了jquery

$(function() {
FastClick.attach(document.body);
});

如果使用了模块加载工具

var attachFastClick = require('fastclick');
attachFastClick(document.body);

移动端click事件延迟300ms问题的更多相关文章

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

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

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

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

  3. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

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

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

  5. 移动端click事件延迟300ms该如何解决

    window.addEventListener( "load", function() {     FastClick.attach( document.body ); }, fa ...

  6. 移动端click事件出现300ms延迟

    问题分析: 双击缩放是指手在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例.当用户在屏幕上单击某元素时,浏览器会先捕获此处单击,但浏览器不知道用户是要单击链接还是要双击该部分 ...

  7. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

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

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

  9. fastclick:处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...

随机推荐

  1. dom中一些节点获取和增改

    1获取标签里的文本对象: 对象.innerText 获取标签里的文本内容     早期的火狐浏览器中是不支持的 赋值会输出转义后的内容 对象.innerHTML 获取标签里的所有内容 赋值会输出原样 ...

  2. Reactive Extensions介绍

    Reactive Extensions(Rx)是对LINQ的一种扩展,他的目标是对异步的集合进行操作,也就是说,集合中的元素是异步填充的,比如说从Web或者云端获取数据然后对集合进行填充.Rx起源于M ...

  3. 安卓动态调试七种武器之离别钩 – Hooking(下)

    0x00 序 随着移动安全越来越火,各种调试工具也都层出不穷,但因为环境和需求的不同,并没有工具是万能的.另外工具是死的,人是活的,如果能搞懂工具的原理再结合上自身的经验,你也可以创造出属于自己的调试 ...

  4. 动态sql

    目录 1.给动态语句传值(USING 子句) 2.从动态语句检索值(INTO子句) 3.动态调用存过 4.将返回值传递到PL/SQL记录类型;同样也可用%rowtype变量 5.传递并检索值.INTO ...

  5. MySQL实现嵌套集合模型

    MySQL实现嵌套集合模型 译文主要是介绍如何用MySQL来存储嵌套集合数据.在其中会增加一些自己的理解,也会删除掉一些自认为无用的废话. 这篇文章主要讲的是嵌套集合模型,所以邻接表不是本文的重点,简 ...

  6. 分辨率、DPI、PPI和屏幕尺寸,你都知道是啥么?

    分辨率.DPI.PPI和屏幕尺寸 分辨率 DPI/PPI 坑爹的屏幕尺寸 Reference 手机开发中不免会遇到分辨率.DPI.PPI和屏幕尺寸等术语,那就弄弄清楚这些概念的真正含义. 分辨率 分辨 ...

  7. 激活jws.mono的图像处理

    不得不说,jws.mono真的给我们带来了很大的便利,它免除了我们编译Linux.NET所带来的烦恼,节省了我们的时间.但是金无足赤人无完人,虽然jws.mono已经大致能够提供与我们自行编译相同的效 ...

  8. 今天Windows Azure Live to Code的分享

    今天参加了微软广州的Live to Code,晚上回公司OT写了封报告E-mail,也没让公司今天白出工资给我... 因为没有涉及到公司机密什么的,所以就拿出来跟大家分享一下. 首先要说明的是,在会议 ...

  9. TODO:MongoDB MySQL数据库备份

    TODO:MongoDB MySQL数据库备份 1. MongoDB使用命令备份 mongodump进行整个数据库备份,主要用到的命令参数: -d 要备份的数据库 -o 输出的路径 ./mongodu ...

  10. MongoDB 文档的删除操作

    在db中删除数据是十分危险的事,建议使用logic delete,即在doc中增加一个field:IsDeleted,将其设置为1,表示该doc在逻辑上被删除,这种workaround将delete操 ...