浅谈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; };
内容版权声明:除非注明,否则皆为本站原创文章。