faskclick
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);
};
- 同页面tap点击弹出弹层,弹层中也有一个button,正好重叠的时候,会出现击穿
- tap事件点击,页面跳转,新页面中同位置也有一个按钮,会出现击穿
//trigger single tap after 250ms of inactivity
else {
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
}, )
}
- zepto中的 tap 通过兼听绑定在 document 上的 touch 事件来完成 tap 事件的模拟的,是通过事件冒泡实现的。在点击完成时(touchstart / touchend)的 tap 事件需要冒泡到 document 上才会触发。而在冒泡到 document 之前,手指接触和离开屏幕(touchstart / touchend)是会触发 click 事件的。
- 因为 click 事件有延迟(大概是300ms,为了实现safari的双击事件的设计),所以在执行完 tap 事件之后,弹出层立马就隐藏了,此时 click 事件还在延迟的 300ms 之中。当 300ms 到来的时候,click 到的其实是隐藏元素下方的元素。
- 如果正下方的元素有绑定 click 事件,此时便会触发,如果没有绑定 click 事件的话就当没发生。如果正下方的是 input 输入框(或是 select / radio / checkbox),点击默认 focus 而弹出输入键盘,也就出现了上面的“点透”现象。
faskclick的更多相关文章
- 移动端兼容 - faskclick.js
fasckclick为解决移动端300ms延迟而生 github地址为:https://github.com/ftlabs/fastclick 使用方法: 1. 原生使用(window.onload或 ...
- JQUERY相关
https://github.com/mythz/jquip/ http://zeptojs.com/ http://devework.com/jquery-builder.html http://p ...
- Vue 旅游网首页开发2 - 首页编写
Vue 旅游网首页开发2 - 首页编写 项目结构 首页开发 效果图 项目开发组件化 将页面的各个部分划分成不同的组件,有助于项目的开发和维护. 项目代码初始化 项目结构修改 1.删除整个 compin ...
- 用rekit创建react项目
第一步 先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...
- 移动端开发:使用jQuery Mobile还是Zepto
原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobil ...
- 移动端300ms兼容问题(移动端经典问题)
移动端300ms延迟原因 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌 ...
- 兼容和Error
兼容 IE兼容 ie没有forEach if(!Array.prototype.forEach) { Array.prototype.forEach = function(fun){ var len ...
随机推荐
- vue开发 ES5——> ES6设置
- Node初识笔记 1第一周
#下载安装好node > https://nodejs.org/en/ # 打开cmd 调整好执行路径 . 1.js是JS文件名,cd调招路径,‘node’+空格 +JS文件名(带上扩展名) ...
- H5实现的时钟
源码如下: <!doctype html> <html> <head></head> <body> <canvas id=" ...
- Jquery 中 $.getJSON的用法
之前类似的方法用过 $.post, $.get,$.ajax,还是第一次用这个 $.getJSON. 前三个都是用作异步请求的,那么最后一个呢?其实也是异步请求的,和 $.get 最类似,因为他也是将 ...
- delphi(假三层之数据访问层)(第一天)
本论文主要是通过三天来讲解三层的结构,今天是第一天,先讲解一下delphi下的Models层,我主要封装了两个查询得到数据集的函数,主要是通过在表示层上创建的数数据集控件传递进来,通过业务逻辑对语句的 ...
- IE Only的userData
上次我们提到了本地存储的一个方式,那就是Cookie,不过遗憾的是Cookie保存的数据量非常小,更详细的可以参考<在 Internet Explorer 中的 cookie 的数字和大小限制& ...
- CF702F T-Shirts
题目描述 The big consignment of t-shirts goes on sale in the shop before the beginning of the spring. In ...
- HEOI2015小L的白日梦
题面链接 洛咕 sol 为什么网上面只有神仙题解啊!!! 引起我这种蒟蒻不适QAQ. 性质证明留给巨佬 然后我只贴性质了QwQ. 1.一定存在最优解每一天不高兴的概率是单调不增的. 2.一定存在最优解 ...
- java多线程 -- CountDownLatch 闭锁
CountDownLatch 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown ...
- 解题:JXOI 2018 游戏
题面 From ZRQ,很好的计数题 我们可以发现这$len=r-l+1$个数中有一些是必须被查到的,即它们不是一些数的倍数,它们的数目$imp$可以通过一次埃氏筛求出. 在一个排列中可怜查到某个位置 ...