浅谈FastClick 填坑及源码解析(2)
在初始通过 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;
};
内容版权声明:除非注明,否则皆为本站原创文章。
