這篇文章主要介紹了淺談FastClick 填坑及源碼解析，現在分享給大家，也給大家做個參考。
最近產品女孩提出了一個體驗issue —— 用iOS 在手Q閱讀書友交流區發表書評時，遊標點擊總是不好定位到正確的位置：
#
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
var fc = FastClick.attach(document.body); //生成实例
}, false);
}
所以我們從這裡著手，打開原始碼看下FastClick .attach 方法：
FastClick.attach = function(layer, options) {
return new FastClick(layer, options);
};
這裡回傳了一個FastClick 實例，所以咱們拉到前面看看FastClick 建構子：
#
function FastClick(layer, options) {
var oldOnClick;
options = options || {};
//定义了一些参数...
//如果是属于不需要处理的元素类型，则直接返回
if (FastClick.notNeeded(layer)) {
return;
}
//语法糖，兼容一些用不了 Function.prototype.bind 的旧安卓
//所以后面不走 layer.addEventListener('click', this.onClick.bind(this), true);
function bind(method, context) {
return function() { return method.apply(context, arguments); };
}
var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];
var context = this;
for (var i = 0, l = methods.length; i < l; i++) {
context[methods[i]] = bind(context[methods[i]], context);
}
//安卓则做额外处理
if (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('touchmove', this.onTouchMove, false);
layer.addEventListener('touchend', this.onTouchEnd, false);
layer.addEventListener('touchcancel', this.onTouchCancel, false);
// 兼容不支持 stopImmediatePropagation 的浏览器(比如 Android 2)
if (!Event.prototype.stopImmediatePropagation) {
layer.removeEventListener = function(type, callback, capture) {
var rmv = Node.prototype.removeEventListener;
if (type === 'click') {
rmv.call(layer, type, callback.hijacked || callback, capture);
} else {
rmv.call(layer, type, callback, capture);
}
};
layer.addEventListener = function(type, callback, capture) {
var adv = Node.prototype.addEventListener;
if (type === 'click') {
//留意这里 callback.hijacked 中会判断 event.propagationStopped 是否为真来确保（安卓的onMouse事件）只执行一次
//在 onMouse 事件里会给 event.propagationStopped 赋值 true
adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
if (!event.propagationStopped) {
callback(event);
}
}), capture);
} else {
adv.call(layer, type, callback, capture);
}
};
}
// 如果layer直接在DOM上写了 onclick 方法，那我们需要把它替换为 addEventListener 绑定形式
if (typeof layer.onclick === 'function') {
oldOnClick = layer.onclick;
layer.addEventListener('click', function(event) {
oldOnClick(event);
}, false);
layer.onclick = null;
}
}
在初始透過FastClick.notNeeded 方法判斷是否需要做後續的相關處理：
//如果是属于不需要处理的元素类型，则直接返回
if (FastClick.notNeeded(layer)) {
return;
}
我們看下這個FastClick.notNeeded 都做了哪些判斷：
//是否没必要使用到 Fastclick 的检测
FastClick.notNeeded = function(layer) {
var metaViewport;
var chromeVersion;
var blackberryVersion;
var firefoxVersion;
// 不支持触摸的设备
if (typeof window.ontouchstart === 'undefined') {
return true;
}
// 获取Chrome版本号，若非Chrome则返回0
chromeVersion = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [,0])[1];
if (chromeVersion) {
if (deviceIsAndroid) { //安卓
metaViewport = document.querySelector('meta[name=viewport]');
if (metaViewport) {
// 安卓下，带有 user-scalable="no" 的 meta 标签的 chrome 是会自动禁用 300ms 延迟的，所以无需 Fastclick
if (metaViewport.content.indexOf('user-scalable=no') !== -1) {
return true;
}
// 安卓Chrome 32 及以上版本，若带有 width=device-width 的 meta 标签也是无需 FastClick 的
if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {
return true;
}
}
// 其它的就肯定是桌面级的 Chrome 了，更不需要 FastClick 啦
} else {
return true;
}
}
if (deviceIsBlackBerry10) { //黑莓，和上面安卓同理，就不写注释了
blackberryVersion = navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/);
if (blackberryVersion[1] >= 10 && blackberryVersion[2] >= 3) {
metaViewport = document.querySelector('meta[name=viewport]');
if (metaViewport) {
if (metaViewport.content.indexOf('user-scalable=no') !== -1) {
return true;
}
if (document.documentElement.scrollWidth <= window.outerWidth) {
return true;
}
}
}
}
// 带有 -ms-touch-action: none / manipulation 特性的 IE10 会禁用双击放大，也没有 300ms 时延
if (layer.style.msTouchAction === 'none' || layer.style.touchAction === 'manipulation') {
return true;
}
// Firefox检测，同上
firefoxVersion = +(/Firefox\/([0-9]+)/.exec(navigator.userAgent) || [,0])[1];
if (firefoxVersion >= 27) {
metaViewport = document.querySelector('meta[name=viewport]');
if (metaViewport && (metaViewport.content.indexOf('user-scalable=no') !== -1 || document.documentElement.scrollWidth <= window.outerWidth)) {
return true;
}
}
// IE11 推荐使用没有“-ms-”前缀的 touch-action 样式特性名
if (layer.style.touchAction === 'none' || layer.style.touchAction === 'manipulation') {
return true;
}
return false;
};
基本上都是一些能停用300ms 時延的瀏覽器嗅探，它們都沒必要使用Fastclick ，所以會回傳true 回構造函數停止下一步執行。 由於安卓手Q的ua 會被配對到/Chrome\/([0-9] )/，故帶有'user-scalable=no' meta 標籤的安卓手Q頁會被FastClick 視為無需處理頁。 這也是為何在安卓手Q裡沒有開頭提及問題的原因。 我們繼續看建構函數，它直接為layer（即body）加入了click、touchstart、touchmove、touchend、touchcancel（若是安卓還有mouseover、mousedown、mouseup）事件監聽：
//安卓则做额外处理
if (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('touchmove', this.onTouchMove, false);
layer.addEventListener('touchend', this.onTouchEnd, false);
layer.addEventListener('touchcancel', this.onTouchCancel, false);
注意在這段程式碼上面也利用了bind 方法做了處理，這些事件回呼中的this 都會變成Fastclick 實例上下文。 另外還要留意，onclick 事件以及安卓的額外處理部分都是走的捕獲監聽。 咱們分別看看這些事件回呼分別都做了什麼。
1. this.onTouchStart
FastClick.prototype.onTouchStart = function(event) {
var targetElement, touch, selection;
// 多指触控的手势则忽略
if (event.targetTouches.length > 1) {
return true;
}
targetElement = this.getTargetElementFromEventTarget(event.target); //一些较老的浏览器，target 可能会是一个文本节点，得返回其DOM节点
touch = event.targetTouches[0];
if (deviceIsIOS) { //IOS处理
// 若用户已经选中了一些内容（比如选中了一段文本打算复制），则忽略
selection = window.getSelection();
if (selection.rangeCount && !selection.isCollapsed) {
return true;
}
if (!deviceIsIOS4) { //是否IOS4
//怪异特性处理——若click事件回调打开了一个alert/confirm，用户下一次tap页面的其它地方时，新的touchstart和touchend
//事件会拥有同一个touch.identifier（新的 touch event 会跟上一次触发alert点击的 touch event 一样），
//为避免将新的event当作之前的event导致问题，这里需要禁用事件
//另外chrome的开发工具启用'Emulate touch events'后，iOS UA下的 identifier 会变成0，所以要做容错避免调试过程也被禁用事件了
if (touch.identifier && touch.identifier === this.lastTouchIdentifier) {
event.preventDefault();
return false;
}
this.lastTouchIdentifier = touch.identifier;
// 如果target是一个滚动容器里的一个子元素(使用了 -webkit-overflow-scrolling: touch) ，而且满足:
// 1) 用户非常快速地滚动外层滚动容器
// 2) 用户通过tap停止住了这个快速滚动
// 这时候最后的'touchend'的event.target会变成用户最终手指下的那个元素
// 所以当快速滚动开始的时候，需要做检查target是否滚动容器的子元素，如果是，做个标记
// 在touchend时检查这个标记的值（滚动容器的scrolltop）是否改变了，如果是则说明页面在滚动中，需要取消fastclick处理
this.updateScrollParent(targetElement);
}
}
this.trackingClick = true; //做个标志表示开始追踪click事件了
this.trackingClickStart = event.timeStamp; //标记下touch事件开始的时间戳
this.targetElement = targetElement;
//标记touch起始点的页面偏移值
this.touchStartX = touch.pageX;
this.touchStartY = touch.pageY;
// this.lastClickTime 是在 touchend 里标记的事件时间戳
// this.tapDelay 为常量 200 （ms）
// 此举用来避免 phantom 的双击（200ms内快速点了两次）触发 click
// 反正200ms内的第二次点击会禁止触发其默认事件
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
event.preventDefault();
}
return true;
};
順道看這裡的this.updateScrollParent：
/**
* 检查target是否一个滚动容器里的子元素，如果是则给它加个标记
*/
FastClick.prototype.updateScrollParent = function(targetElement) {
var scrollParent, parentElement;
scrollParent = targetElement.fastClickScrollParent;
if (!scrollParent || !scrollParent.contains(targetElement)) {
parentElement = targetElement;
do {
if (parentElement.scrollHeight > parentElement.offsetHeight) {
scrollParent = parentElement;
targetElement.fastClickScrollParent = parentElement;
break;
}
parentElement = parentElement.parentElement;
} while (parentElement);
}
// 给滚动容器加个标志fastClickLastScrollTop，值为其当前垂直滚动偏移
if (scrollParent) {
scrollParent.fastClickLastScrollTop = scrollParent.scrollTop;
}
};
另外要注意的是，在onTouchStart 裡被標記為true 的this.trackingClick 屬性，都會在其它事件回調（比如ontouchmove ）的開頭做檢測，如果沒被賦值過，則直接忽略：
if (!this.trackingClick) {
return true;
}
當然在ontouchend 事件裡會把它重設為false。
2. this.onTouchMove
這段程式碼量好少：
FastClick.prototype.onTouchMove = function(event) {
//不是需要被追踪click的事件则忽略
if (!this.trackingClick) {
return true;
}
// 如果target突然改变了，或者用户其实是在移动手势而非想要click
// 则应该清掉this.trackingClick和this.targetElement，告诉后面的事件你们也不用处理了
if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {
this.trackingClick = false;
this.targetElement = null;
}
return true;
};
##看下這裡用到的this.touchHasMoved 原型方法：
//判断是否移动了
//this.touchBoundary是常量，值为10
//如果touch已经移动了10个偏移量单位，则应当作为移动事件处理而非click事件
FastClick.prototype.touchHasMoved = function(event) {
var touch = event.changedTouches[0], boundary = this.touchBoundary;
if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) {
return true;
}
return false;
};
3. onTouchEnd
FastClick.prototype.onTouchEnd = function(event) {
var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
if (!this.trackingClick) {
return true;
}
// 避免 phantom 的双击（200ms内快速点了两次）触发 click
// 我们在 ontouchstart 里已经做过一次判断了（仅仅禁用默认事件），这里再做一次判断
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
this.cancelNextClick = true; //该属性会在 onMouse 事件中被判断，为true则彻底禁用事件和冒泡
return true;
}
//this.tapTimeout是常量，值为700
//识别是否为长按事件，如果是（大于700ms）则忽略
if ((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {
return true;
}
// 得重置为false，避免input事件被意外取消
// 例子见 https://github.com/ftlabs/fastclick/issues/156
this.cancelNextClick = false;
this.lastClickTime = event.timeStamp; //标记touchend时间，方便下一次的touchstart做双击校验
trackingClickStart = this.trackingClickStart;
//重置 this.trackingClick 和 this.trackingClickStart
this.trackingClick = false;
this.trackingClickStart = 0;
// iOS 6.0-7.*版本下有个问题 —— 如果layer处于transition或scroll过程，event所提供的target是不正确的
// 所以咱们得重找 targetElement（这里通过 document.elementFromPoint 接口来寻找）
if (deviceIsIOSWithBadTarget) { //iOS 6.0-7.*版本
touch = event.changedTouches[0]; //手指离开前的触点
// 有些情况下 elementFromPoint 里的参数是预期外/不可用的, 所以还得避免 targetElement 为 null
targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement;
// target可能不正确需要重找，但fastClickScrollParent是不会变的
targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent;
}
targetTagName = targetElement.tagName.toLowerCase();
if (targetTagName === 'label') { //是label则激活其指向的组件
forElement = this.findControl(targetElement);
if (forElement) {
this.focus(targetElement);
//安卓直接返回（无需合成click事件触发，因为点击和激活元素不同，不存在点透）
if (deviceIsAndroid) {
return false;
}
targetElement = forElement;
}
} else if (this.needsFocus(targetElement)) { //非label则识别是否需要focus的元素
//手势停留在组件元素时长超过100ms，则置空this.targetElement并返回
//（而不是通过调用this.focus来触发其聚焦事件，走的原生的click/focus事件触发流程）
//这也是为何文章开头提到的问题中，稍微久按一点（超过100ms）textarea是可以把光标定位在正确的地方的原因
//另外iOS下有个意料之外的bug——如果被点击的元素所在文档是在iframe中的，手动调用其focus的话，
//会发现你往其中输入的text是看不到的（即使value做了更新），so这里也直接返回
if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
this.targetElement = null;
return false;
}
this.focus(targetElement);
this.sendClick(targetElement, event); //立即触发其click事件，而无须等待300ms
//iOS4下的 select 元素不能禁用默认事件（要确保它能被穿透），否则不会打开select目录
//有时候 iOS6/7 下（VoiceOver开启的情况下）也会如此
if (!deviceIsIOS || targetTagName !== 'select') {
this.targetElement = null;
event.preventDefault();
}
return false;
}
if (deviceIsIOS && !deviceIsIOS4) {
// 滚动容器的垂直滚动偏移改变了，说明是容器在做滚动而非点击，则忽略
scrollParent = targetElement.fastClickScrollParent;
if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
return true;
}
}
// 查看元素是否无需处理的白名单内（比如加了名为“needsclick”的class）
// 不是白名单的则照旧预防穿透处理，立即触发合成的click事件
if (!this.needsClick(targetElement)) {
event.preventDefault();
this.sendClick(targetElement, event);
}
return false;
};
這段比較長，我們主要看這段：
} else if (this.needsFocus(targetElement)) { //非label则识别是否需要focus的元素
//手势停留在组件元素时长超过100ms，则置空this.targetElement并返回
//（而不是通过调用this.focus来触发其聚焦事件，走的原生的click/focus事件触发流程）
//这也是为何文章开头提到的问题中，稍微久按一点（超过100ms）textarea是可以把光标定位在正确的地方的原因
//另外iOS下有个意料之外的bug——如果被点击的元素所在文档是在iframe中的，手动调用其focus的话，
//会发现你往其中输入的text是看不到的（即使value做了更新），so这里也直接返回
if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
this.targetElement = null;
return false;
}
this.focus(targetElement);
this.sendClick(targetElement, event); //立即触发其click事件，而无须等待300ms
//iOS4下的 select 元素不能禁用默认事件（要确保它能被穿透），否则不会打开select目录
//有时候 iOS6/7 下（VoiceOver开启的情况下）也会如此
if (!deviceIsIOS || targetTagName !== 'select') {
this.targetElement = null;
event.preventDefault();
}
return false;
}
其中this.needsFocus 用來判斷給定元素是否需要透過合成click事件來模擬聚焦：
//判断给定元素是否需要通过合成click事件来模拟聚焦
FastClick.prototype.needsFocus = function(target) {
switch (target.nodeName.toLowerCase()) {
case 'textarea':
return true;
case 'select':
return !deviceIsAndroid; //iOS下的select得走穿透点击才行
case 'input':
switch (target.type) {
case 'button':
case 'checkbox':
case 'file':
case 'image':
case 'radio':
case 'submit':
return false;
}
return !target.disabled && !target.readOnly;
default:
//带有名为“bneedsfocus”的class则返回true
return (/\bneedsfocus\b/).test(target.className);
}
};
另外這段說明了為何稍微久按一點（超過100ms）textarea ，我們是可以把遊標定位在正確的地方（會繞過後面呼叫this.focus 的方法）：
//手势停留在组件元素时长超过100ms，则置空this.targetElement并返回
//（而不是通过调用this.focus来触发其聚焦事件，走的原生的click/focus事件触发流程）
//这也是为何文章开头提到的问题中，稍微久按一点（超过100ms）textarea是可以把光标定位在正确的地方的原因
//另外iOS下有个意料之外的bug——如果被点击的元素所在文档是在iframe中的，手动调用其focus的话，
//会发现你往其中输入的text是看不到的（即使value做了更新），so这里也直接返回
if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) {
this.targetElement = null;
return false;
}##接著咱們看看這兩行很重要的程式碼：
this.focus(targetElement); this.sendClick(targetElement, event); //立即触发其click事件，而无须等待300ms
所涉及的兩個原型方法分別為：
⑴ this.focus
FastClick.prototype.focus = function(targetElement) {
var length;
// 组件建议通过setSelectionRange(selectionStart, selectionEnd)来设定光标范围（注意这样还没有聚焦
// 要等到后面触发 sendClick 事件才会聚焦）
// 另外 iOS7 下有些input元素(比如 date datetime month) 的 selectionStart 和 selectionEnd 特性是没有整型值的，
// 导致会抛出一个关于 setSelectionRange 的模糊错误，它们需要改用 focus 事件触发
if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
length = targetElement.value.length;
targetElement.setSelectionRange(length, length);
} else {
//直接触发其focus事件
targetElement.focus();
}
};
#
注意，我们点击 textarea 时调用了该方法，它通过 targetElement.setSelectionRange(length, length) 决定了光标的位置在内容的尾部（但注意，这时候还没聚焦！！！）。
⑵ this.sendClick
真正让 textarea 聚焦的是这个方法，它合成了一个 click 方法立刻在textarea元素上触发导致聚焦：
//合成一个click事件并在指定元素上触发
FastClick.prototype.sendClick = function(targetElement, event) {
var clickEvent, touch;
// 在一些安卓机器中，得让页面所存在的 activeElement（聚焦的元素，比如input）失焦，否则合成的click事件将无效
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.changedTouches[0];
// 合成(Synthesise) 一个 click 事件
// 通过一个额外属性确保它能被追踪（tracked）
clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true; // fastclick的内部变量，用来识别click事件是原生还是合成的
targetElement.dispatchEvent(clickEvent); //立即触发其click事件
};
FastClick.prototype.determineEventType = function(targetElement) {
//安卓设备下 Select 无法通过合成的 click 事件被展开，得改为 mousedown
if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') {
return 'mousedown';
}
return 'click';
};
经过这么一折腾，咱们轻点 textarea 后，光标就自然定位到其内容尾部去了。但是这里有个问题——排在 touchend 后的 focus 事件为啥没被触发呢？
如果 focus 事件能被触发的话，那肯定能重新定位光标到正确的位置呀。
咱们看下面这段：
//iOS4下的 select 元素不能禁用默认事件（要确保它能被穿透），否则不会打开select目录
//有时候 iOS6/7 下（VoiceOver开启的情况下）也会如此
if (!deviceIsIOS || targetTagName !== 'select' ) {
this.targetElement = null;
event.preventDefault();
}
通过 preventDefault 的阻挡，textarea 自然再也无法拥抱其 focus 宝宝了~
于是乎，我们在这里做个改动就能修复这个问题：
var _isTextInput = function(){
return targetTagName === 'textarea' || (targetTagName === 'input' && targetElement.type === 'text');
};
if ((!deviceIsIOS || targetTagName !== 'select') && !_isTextInput()) {
this.targetElement = null;
event.preventDefault();
}
或者：
if (!deviceIsIOS4 || targetTagName !== 'select') {
this.targetElement = null;
//给textarea加上“needsclick”的class
if((!/\bneedsclick\b/).test(targetElement.className)){
event.preventDefault();
}
}
这里要吐槽下的是，Fastclick 把 this.needsClick 放到了 ontouchEnd 末尾去执行，才导致前面说的加上了“needsclick”类名也无效的问题。
虽然问题原因找到也解决了，但咱们还是继续看剩下的部分吧。
4. onMouse 和 onClick
//用于决定是否允许穿透事件（触发layer的click默认事件）
FastClick.prototype.onMouse = function(event) {
// touch事件一直没触发
if (!this.targetElement) {
return true;
}
if (event.forwardedTouchEvent) { //触发的click事件是合成的
return true;
}
// 编程派生的事件所对应元素事件可以被允许
// 确保其没执行过 preventDefault 方法（event.cancelable 不为 true）即可
if (!event.cancelable) {
return true;
}
// 需要做预防穿透处理的元素，或者做了快速（200ms）双击的情况
if (!this.needsClick(this.targetElement) || this.cancelNextClick) {
//停止当前默认事件和冒泡
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
// 不支持 stopImmediatePropagation 的设备(比如Android 2)做标记，
// 确保该事件回调不会执行（见126行）
event.propagationStopped = true;
}
// 取消事件和冒泡
event.stopPropagation();
event.preventDefault();
return false;
}
//允许穿透
return true;
};
//click事件常规都是touch事件衍生来的，也排在touch后面触发。
//对于那些我们在touch事件过程没有禁用掉默认事件的event来说，我们还需要在click的捕获阶段进一步
//做判断决定是否要禁掉点击事件（防穿透）
FastClick.prototype.onClick = function(event) {
var permitted;
// 如果还有 trackingClick 存在，可能是某些UI事件阻塞了touchEnd 的执行
if (this.trackingClick) {
this.targetElement = null;
this.trackingClick = false;
return true;
}
// 依旧是对 iOS 怪异行为的处理 —— 如果用户点击了iOS模拟器里某个表单中的一个submit元素
// 或者点击了弹出来的键盘里的“Go”按钮，会触发一个“伪”click事件（target是一个submit-type的input元素）
if (event.target.type === 'submit' && event.detail === 0) {
return true;
}
permitted = this.onMouse(event);
if (!permitted) { //如果点击是被允许的，将this.targetElement置空可以确保onMouse事件里不会阻止默认事件
this.targetElement = null;
}
//没有多大意义
return permitted;
};
//销毁Fastclick所注册的监听事件。是给外部实例去调用的
FastClick.prototype.destroy = function() {
var layer = this.layer;
if (deviceIsAndroid) {
layer.removeEventListener('mouseover', this.onMouse, true);
layer.removeEventListener('mousedown', this.onMouse, true);
layer.removeEventListener('mouseup', this.onMouse, true);
}
layer.removeEventListener('click', this.onClick, true);
layer.removeEventListener('touchstart', this.onTouchStart, false);
layer.removeEventListener('touchmove', this.onTouchMove, false);
layer.removeEventListener('touchend', this.onTouchEnd, false);
layer.removeEventListener('touchcancel', this.onTouchCancel, false);
};
常规需要阻断点击事件的操作，我们在 touch 监听事件回调中已经做了处理，这里主要是针对那些 touch 过程（有些设备甚至可能并没有touch事件触发）没有禁用默认事件的 event 做进一步处理，从而决定是否触发原生的 click 事件（如果禁止是在 onMouse 方法里做的处理）。
小结
1. 在 fastclick 源码的 addEventListener 回调事件中有很多的 return false/true。它们其实主要用于绕过后面的脚本逻辑，并没有其它意义（它是不会阻止默认事件的）。
所以千万别把 jQuery 事件、或者 DOM0 级事件回调中的 return false 概念，跟 addEventListener 的混在一起了。
2. fastclick 的源码其实很简单，有很大部分不外乎对一些怪异行为做 hack，其核心理念不外乎是——捕获 target 事件，判断 target 是要解决点透问题的元素，就合成一个 click 事件在 target 上触发，同时通过 preventDefault 禁用默认事件。
3. fastclick 虽好，但也有一些坑，还是得按需求对其修改，那么了解其源码还是很有必要的。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是詳細講解FastClick原始碼（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AMJavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。
C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AMC 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。
從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AMJavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。
Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AMPython更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。
C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AMC和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
1 個月前ByDDD
熱工具
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
記事本++7.3.1
好用且免費的程式碼編輯器
