PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行为,事件的触发过程为:mousedown -> mouseup -> click 三步。
手机上没有鼠标,所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend,注意手机上并没有tap事件。手指触发触摸事件的过程为:touchstart -> touchmove -> touchend。
    当我们手触碰屏幕时,要过300ms左右才会触发mousedown事件,所以click事件在手机上看起来就像慢半拍一样。 为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。用过Zepto或KISSY等移动端js库的人肯定对tap事件不陌生,我们做PC页面时绑定click,相应地手机页面就绑定tap。但原生的touch事件本身是没有tap的,js库里提供的tap事件都是模拟出来的。

不应用 FastClick 的场景,如果 viewport meta 标签 中设置了 width=device-width, Android 上的 Chrome 32+ 会禁用 300ms 延时;
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport meta 标签如果设置了 user-scalable=no,Android 上的 Chrome(所有版本)都会禁用 300ms 延迟。
 
测试延迟情况
XX.ontouchstart = function(){
startTime =Date.now();
};
XX.ontouchend = function(){
pre.innerHTML += ('ontouchend : ' + (Date.now() - startTime) + '\n');
};
XX.onclick = function(){
pre.innerHTML += ('click : ' + (Date.now() - startTime));
}
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
} //优先兼容AMD方式
if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
define(function() {
return FastClick;
});
} else if (typeof module !== 'undefined' && module.exports) {
//兼容commonJs风格
module.exports = FastClick.attach;
module.exports.FastClick = FastClick;
} else {
//最后兼容原生Js
window.FastClick = FastClick;
}

核心方法

//391-450:onTouchStart
FastClick.prototype.onTouchStart = function(event) {
//tapDelay默认300毫秒,点击时间差小于300毫秒,则阻止事件再次触发,阻止短时间内双击的问题
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
event.preventDefault();
}
}
//521-610:onTouchEnd
if (!this.needsClick(targetElement)) {
// 如果这不是一个需要使用原生click的元素,则屏蔽原生事件,避免触发两次click
event.preventDefault();
// 触发一次模拟的click
this.sendClick(targetElement, event);
}
//294-309:sendClick(核心方法)
//这个事件会在onTouchEnd中用到,经过一系列的判断,符合条件,调用这个模拟事件
FastClick.prototype.sendClick = function(targetElement, event) {
var clickEvent, touch;
//创建一个鼠标事件
clickEvent = document.createEvent('MouseEvents');
//初始化鼠标事件
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, , touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, , null);
//触发这个事件
targetElement.dispatchEvent(clickEvent);
};

用Zepto的插件touch.js中tap事件,来解决移动浏览器中300毫秒延迟的问题。但是出现了各种击穿现象
  1. 同页面tap点击弹出弹层,弹层中也有一个button,正好重叠的时候,会出现击穿
  2. tap事件点击,页面跳转,新页面中同位置也有一个按钮,会出现击穿
我们可以看下Zepto对 singleTap 事件的处理。见源码 136-143 行,可以看出在 touchend 响应 250ms 无操作后,则触发singleTap。
//trigger single tap after 250ms of inactivity
else {
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
}, )
}

  1. zepto中的 tap 通过兼听绑定在 document 上的 touch 事件来完成 tap 事件的模拟的,是通过事件冒泡实现的。在点击完成时(touchstart / touchend)的 tap 事件需要冒泡到 document 上才会触发。而在冒泡到 document 之前,手指接触和离开屏幕(touchstart / touchend)是会触发 click 事件的。
  2. 因为 click 事件有延迟(大概是300ms,为了实现safari的双击事件的设计),所以在执行完 tap 事件之后,弹出层立马就隐藏了,此时 click 事件还在延迟的 300ms 之中。当 300ms 到来的时候,click 到的其实是隐藏元素下方的元素。
  3. 如果正下方的元素有绑定 click 事件,此时便会触发,如果没有绑定 click 事件的话就当没发生。如果正下方的是 input 输入框(或是 select / radio / checkbox),点击默认 focus 而弹出输入键盘,也就出现了上面的“点透”现象。
 
 
 

faskclick的更多相关文章

  1. 移动端兼容 - faskclick.js

    fasckclick为解决移动端300ms延迟而生 github地址为:https://github.com/ftlabs/fastclick 使用方法: 1. 原生使用(window.onload或 ...

  2. JQUERY相关

    https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...

  3. Vue 旅游网首页开发2 - 首页编写

    Vue 旅游网首页开发2 - 首页编写 项目结构 首页开发 效果图 项目开发组件化 将页面的各个部分划分成不同的组件,有助于项目的开发和维护. 项目代码初始化 项目结构修改 1.删除整个 compin ...

  4. 用rekit创建react项目

    第一步  先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...

  5. 移动端开发:使用jQuery Mobile还是Zepto

    原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobil ...

  6. 移动端300ms兼容问题(移动端经典问题)

    移动端300ms延迟原因 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌 ...

  7. 兼容和Error

    兼容 IE兼容 ie没有forEach if(!Array.prototype.forEach) { Array.prototype.forEach = function(fun){ var len ...

随机推荐

  1. Cron表达式简单的介绍

    1.Cron是什么,用来做什么的 根据百度百科的解释:计划任务,是任务在约定的时间执行已经计划好的工作,这是表面的意思.在Linux中,我们经常用到 cron 服务器来完成这项工作.cron服务器可以 ...

  2. python自动化之连接数据库

    # -*- coding: utf-8 -*- """ Created on Fri Mar 20 10:50:56 2015 @author: sl "&qu ...

  3. 【uoj#143】[UER #5]万圣节的数列 构造

    题目描述 给出一个的数列,将其重新排列,使得其等差子序列的数目最小.输出一种可能的排列后的数列. 题解 构造 那天和 EdwardFrog 讨论 bzoj2124 的构造时突然有的灵感,最后发现就是这 ...

  4. CyclicBarrier用法

    CyclicBarrier和CountDownLatch一样,都是关于线程的计数器. 用法略有不同,测试代码如下: 1 public class TestCyclicBarrier { 2 3 pri ...

  5. win10远程连接

    提示凭证不工作问题 https://blog.csdn.net/sinat_25926481/article/details/50775616

  6. 51nod 1208 窗上的星星 | 线段树 扫描线

    51nod 1208 Stars In Your Window 题面 整点上有N颗星星,每颗星星有一个亮度.用一个平行于x轴和y轴,宽为W高为H的方框去套星星.套住的所有星星的亮度之和为S(包括边框上 ...

  7. 【科技】KD-tree随想

    大概就是个复杂度对的暴力做法,在你不想写二维线段树等的时候优秀的替代品. 优点:思路简单,代码好写. 他大概有两种用法(虽然差不多). 在平面坐标系中干一些事情: 例如最常规的平面最近最远点,不管是欧 ...

  8. 关于Powershell对抗安全软件(转)

    Windows PowerShell的强大,并且内置,在渗透过程中,也让渗透变得更加有趣.而安全软件的对抗查杀也逐渐开始针对powershell的一切行为.在https://technet.micro ...

  9. PyPt5 浏览器实例

    title: PyPt5 浏览器实例 date: 2018-02-02 13:40:03 tags: Python PyQt5 便携浏览器 categries: Python --- 导入包 pyQt ...

  10. C/C++:copy control (拷贝控制)

    前言:当定义一个类的时候,我们显示或者隐式地指定在此类型的对象拷贝,移动,赋值,销毁时做些什么,一个类通过定义五种特殊的成员函数来控制这些操作,包括拷贝构造函数,拷贝赋值运算符,移动构造函数,移动赋值 ...