这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的,当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。

当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。

于是,300 毫秒延迟就这么诞生了。

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之,FastClick 在检测到 touchend 事件的时候,会通过 DOM 自定义事件立即触发一个模拟click 事件的click事件(自定义事件),并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

FastClick 非常实际地解决 300 毫秒点击延迟的问题。唯一的缺点可能也就是该脚本的文件尺寸 (尽管它不大)。如果你非常在意这点文件大小,可以尝试一下 Filament Group 的 Tappy!,或者 tap.js。两者都相当轻量,能够通过监听 tap 而非 click 事件来绕过 300 毫秒延迟。

当然,zepto库函数中,也有一个touch模块,此模块也包含tap事件,可以通过绑定tap来取代click事件。

但是zepto的tap事件会有点透问题。如何解决,请看下篇分解。

接下来,我们来详细了解一个问题:FastClick解决延迟点击的源码解析。

FastClick解决延迟点击的源码解析。

首先,我们来看FastClick的使用。

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

这样就解决了 300 毫秒点击延迟的问题。

FastClick的源码:

FastClick.attach = function(layer) {
'use strict';
return new FastClick(layer);
};

在FastClick的构造函数中,会有下面这段代码:

	this.onClick = function() { return FastClick.prototype.onClick.apply(self, arguments); };

	this.onMouse = function() { return FastClick.prototype.onMouse.apply(self, arguments); };

	this.onTouchStart = function() { return FastClick.prototype.onTouchStart.apply(self, arguments); };

	this.onTouchEnd = function() { return FastClick.prototype.onTouchEnd.apply(self, arguments); };

	this.onTouchCancel = function() { return FastClick.prototype.onTouchCancel.apply(self, arguments); };

	if (FastClick.notNeeded(layer)) {
return;
}
if (this.deviceIsAndroid) {
layer.addEventListener('mouseover', this.onMouse, true);
layer.addEventListener('mousedown', this.onMouse, true);
layer.addEventListener('mouseup', this.onMouse, true);
}
layer.addEventListener('click', this.onClick, true);
layer.addEventListener('touchstart', this.onTouchStart, false);
layer.addEventListener('touchend', this.onTouchEnd, false);
layer.addEventListener('touchcancel', this.onTouchCancel, false);

也就是在document.body上绑定了click,touchstart,touchend,touchcancel事件。

这里假设,我们的页面有一个button,绑定了click事件。

当用户点击此button时,会先触发touchstart事件,这时,会冒泡到document.body中,于是就会执行:

FastClick.prototype.onTouchStart = function(event) {
'use strict';
var targetElement, touch, selection; if (event.targetTouches.length > 1) {
return true;
}
targetElement = this.getTargetElementFromEventTarget(event.target);
touch = event.targetTouches[0]; if (this.deviceIsIOS) { selection = window.getSelection();
if (selection.rangeCount && !selection.isCollapsed) {
return true;
} if (!this.deviceIsIOS4) { if (touch.identifier === this.lastTouchIdentifier) {
event.preventDefault();
return false;
} this.lastTouchIdentifier = touch.identifier;
this.updateScrollParent(targetElement);
}
}
this.trackingClick = true;
this.trackingClickStart = event.timeStamp;
this.targetElement = targetElement;
this.touchStartX = touch.pageX;
this.touchStartY = touch.pageY;
if ((event.timeStamp - this.lastClickTime) < 200) {
event.preventDefault();
}
return true;
};

这个回调函数主要做了以下事情:

获取我们当前触发touchstart的元素,这里是button。

然后将鼠标的信息记录了下来,记录鼠标的信息主要是为了在后面touchend触发时,根据这里得到的x、y判断是否为click。

之后,会触发touchend事件,然后冒泡到document.body上,执行以下代码:

FastClick.prototype.onTouchEnd = function(event) {
'use strict';
var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
if (this.touchHasMoved(event) || (event.timeStamp - this.trackingClickStart) > 300) {
this.trackingClick = false;
this.targetElement = null;
}
if (!this.trackingClick) {
return true;
}
if ((event.timeStamp - this.lastClickTime) < 200) {
this.cancelNextClick = true;
return true;
} this.lastClickTime = event.timeStamp;
trackingClickStart = this.trackingClickStart;
this.trackingClick = false;
this.trackingClickStart = 0;
if (this.deviceIsIOSWithBadTarget) {
touch = event.changedTouches[0];
targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
}
targetTagName = targetElement.tagName.toLowerCase();
if (targetTagName === 'label') {
forElement = this.findControl(targetElement);
if (forElement) {
this.focus(targetElement);
if (this.deviceIsAndroid) {
return false;
} targetElement = forElement;
}
} else if (this.needsFocus(targetElement)) {
if ((event.timeStamp - trackingClickStart) > 100 || (this.deviceIsIOS && window.top !== window && targetTagName === 'input')) {
this.targetElement = null;
return false;
} this.focus(targetElement);
if (!this.deviceIsIOS4 || targetTagName !== 'select') {
this.targetElement = null;
event.preventDefault();
}
return false;
}
if (this.deviceIsIOS && !this.deviceIsIOS4) {
scrollParent = targetElement.fastClickScrollParent;
if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
return true;
}
}
if (!this.needsClick(targetElement)) {
event.preventDefault();
this.sendClick(targetElement, event);
}
return false;
};

注意上面的代码中,event.preventDefault();会阻止真实的click事件的触发,因此,在button上面的click事件不会触发。

接下来,我们只需要查看sendClick方法。

FastClick.prototype.sendClick = function(targetElement, event) {
'use strict';
var clickEvent, touch;
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.changedTouches[0]; clickEvent = document.createEvent('MouseEvents');
      
clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true;
targetElement.dispatchEvent(clickEvent);
};

在此方法中,会创建一个自定义的click事件,然后在button上立即触发,于是,button绑定的click的事件回调函数马上执行,因此就没有300ms延迟了。

上面的initMouseEvent方法的前三个参数的意思:1.事件类型,2.是否冒泡,3.是否阻止浏览器的默认行为。

自定义的click事件阻止了浏览器的默认行为,事件冒泡,于是执行document.body的click事件回调函数。代码如下:

FastClick.prototype.onClick = function(event) {
'use strict';
var permitted;
if (this.trackingClick) {
this.targetElement = null;
this.trackingClick = false;
return true;
}
if (event.target.type === 'submit' && event.detail === 0) {
return true;
}
permitted = this.onMouse(event);
if (!permitted) {
this.targetElement = null;
}
return permitted;
};

然后里面有一句 permitted = this.onMouse(event);于是,我们查看onMouse方法:

FastClick.prototype.onMouse = function(event) {
'use strict';
if (!this.targetElement) {
return true;
}
if (event.forwardedTouchEvent) {
return true;
}
if (!event.cancelable) {
return true;
}
if (!this.needsClick(this.targetElement) || this.cancelNextClick) {
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
event.propagationStopped = true;
}
event.stopPropagation();
event.preventDefault();
return false;
}
return true;
};

此方法,会阻止模拟的click事件的冒泡以及默认行为。

到此,解决了移动端浏览器click事件延迟300ms的问题。

  

  

  

加油!  

移动端click事件延迟300ms的原因以及解决办法的更多相关文章

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

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

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

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

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

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

  4. 移动端click事件延迟300ms问题

    因为历史原因,移动端点击事件会有300ms延迟,来判断用户是连续双击缩放还是点击跳转.即如果300ms内连续点击两次,则会理解为对页面进行缩放操作(当然前提是移动端页面设置为可缩放的):在一次点击之后 ...

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

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

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

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

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

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

  8. 设计方案--移动端延迟300ms的原因以及解决方案

    一.前言 移动端浏览器提供一个特殊的功能:双击(double tap)缩放.   二.移动端延迟300ms的原因 为什么要用触摸事件?触摸事件是移动端浏览器特有的html5事件. 因为移动端的clic ...

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

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

随机推荐

  1. WindowsForm--Bubble User Control

    创建一个自定义用户控件,拖入一个label:lblWords,和一个richTextBox:txtWords 代码: using System; using System.Collections.Ge ...

  2. 在shiro-cas中实现 Jasig-cas的Single Sign Out 功能

    1 Single Sign Out 功能 即单点登出功能.也就是在任意子系统进行登出操作后,其他子系统会自动登出. 实际CAS登出的步骤为 所以每个子系统都需要实现一个sso登出响应. cas-cli ...

  3. 别人整理的DP大全(转)

    动态规划 动态规划 容易: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ...

  4. 转WCF Proxy Authentication Required

    WCF Proxy Authentication Required The Problem When I’m in the office, I have to use an authenticated ...

  5. Android中View绘制流程以及invalidate()等相关方法分析

    [原文]http://blog.csdn.net/qinjuning 整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简 ...

  6. Oracle Hang分析--转载

    1. 数据库hang的几种可能性 oracle 死锁 或者系统负载非常高比如cpu使用或其他一些锁等待很高都可能导致系统hang住,比如大量的DX锁. 通常来说,我们所指的系统hang住,是指应用无响 ...

  7. 使用Struts2搭建登录注册示例

    使用Struts2来搭建mvc网站框架还是比较容易的,Struts2提供了各项辅助功能,保证了web开发的快速方便.下面使用struts2来搭建一个登录注册示例. 0 项目结构截图 1 搭建Strut ...

  8. 慕课网-Java入门第一季-7-5 Java 中带参无返回值方法的使用

    public class HelloWorld { public static void main(String[] args) { // 创建对象,对象名为hello HelloWorld hell ...

  9. python subprocess.Popen 非阻塞

    1.非阻塞设置subprocess.Popen(args, stdout=subprocess.PIPE,stderr=subprocess.PIPE) def non_block_read(outp ...

  10. python字典嵌套字典的情况下获取某个key的value

    最近在用python写接口的测试程序,期间用到解析字典获取某个key的value,由于多个接口返回的字典格式不是固定的并存在多层嵌套的情况.在字典的方法中也没有找到可直接达到目的的方法(也可能是我对字 ...