一直想研究fastclick在移动端有多快，于是今天通过彻底解决TAP(点透)提升移动端点击响应速度学习了fastclick的原理，做了下面的测试(请手机上查看)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<title>单身不孤单</title>
<style>
.topSlide{
position : relative ;
background-color: blue ;
margin : auto ;
margin-top : 30px ;
}
.topSlide p{
text-align: center ;
font-size : 20px ;
line-height : 36px ;
color : white ;
}
.result{
position : relative ;
background-color: green ;
margin : auto ;
margin-top : 30px ;
color : white ;
}
</style>
</head>
<body>
<div id="t1" class="topSlide">
<p>click me</p>
</div>
<div id="t2" class="topSlide">
<p>click me(by FastClick)</p>
</div>
<div id="result1" class="result">
<h3>touchStart</h3>
<p>haha</p>
</div>
<div id="result2" class="result">
<h3>click(ms)</h3>
<p>haha</p>
</div>
<div id="result3" class="result">
<h3>touchEnd(ms)</h3>
<p>haha</p>
</div>
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script>
$(function(){
var startTime;
var log = function (msg) {
var t = (new Date().getTime() - startTime);
if(msg == 'touchStart')
$('#result1 p').text(t);
else if(msg == 'touchEnd')
$('#result3 p').text(t);
else if(msg == 'mouseClick')
$('#result2 p').text(t);
console.log(msg);
};
var touchStart = function () {
startTime = new Date().getTime();
log('touchStart');
};
var mouseClick = function () {
log('mouseClick');
};
var touchEnd = function () {
log('touchEnd');
};
var me = $('#t2')[0];
FastClick.attach(me);
$('#t1').on('click', mouseClick);
var dom = $('#t2')[0];
dom.addEventListener('click', mouseClick);
document.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchEnd);
});
</script>
</html>
为其中一个按钮绑定了fastclick，结果如下:
fastclick
普通click
普通click的响应延时十分瞩目，而fastclick则在touchend之前就处理了click。
测试方法参考了手持设备点击响应速度，鼠标事件与touch事件的那些事
网友评论