fastclick
现在有现成的插件fastclick可以解决这个问题，但是也有弊端：
github上最新版本的插件大小为25.4kb，轻量为趋势，能省则省。
它的核心思想是取消默认的click时间，判断当前dom节点的类型进行相应的操作，这个判断过程较为繁琐。
mytapevent
本人最近在做微信项目，由于fastclick插件存在一定弊端，因此开发了一个简单的tap事件，主要思想有以下几点：
thinking
一次tap事件包含touchstart和touchmove(轻微移动)以及touchend三种状态
callback方法在touchend后执行
根据chrome浏览器默认的判断取消点击的移动量，手指偏移量（水平或垂直）超过15px则判定为滚动，取消执行tap事件
手指按下时间过长不视为点击，默认时间间隔为500ms
使用htmlelement来扩充原型，方便添加event
使用单例模式，确保只加载一次
ok，思想定下来，代码写起来就清晰多了：
if (!htmlelement.prototype.addtapevent) {
htmlelement.prototype.addtapevent = function(callback) { var tapstarttime = 0,
tapendtime = 0,
taptime = 500, //tap等待时间，在此事件下松开可触发方法
tapstartclientx = 0,
tapstartclienty = 0,
tapendclientx = 0,
tapendclienty = 0,
tapscollheight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量)
cancleclick = false; this.addeventlistener('touchstart', function() {
tapstarttime = event.timestamp; var touch = event.changedtouches[0];
tapstartclientx = touch.clientx;
tapstartclienty = touch.clienty;
cancleclick = false;
}) this.addeventlistener('touchmove', function() { var touch = event.changedtouches[0];
tapendclientx = touch.clientx;
tapendclienty = touch.clienty; if ((math.abs(tapendclientx - tapstartclientx) > tapscollheight) || (math.abs(tapendclienty - tapstartclienty) > tapscollheight)) {
cancleclick = true;
}
}) this.addeventlistener('touchend', function() {
tapendtime = event.timestamp; if (!cancleclick && (tapendtime - tapstarttime) <= taptime) {
callback();
}
})
}
}
usage
htmlelement.addtapevent(function(){ //do something...})
如：document.queryselect('#test').addtapevent(function(){
alert('this is a tap event');
})
case
这里给一个移动端案例，同时也包含了闭包的知识，前20项为tap事件，后30项为click事件，大家可以在手机上试一下效果，感受一下两种方法的差别：
<style media="screen">
li { padding: 20px;
}</style><!doctype html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="x5-orientation" content="portrait">
<title>test</title>
</head>
<body>
<ul></ul>
</body>
<script type="text/javascript">
if (!htmlelement.prototype.addtapevent) {
htmlelement.prototype.addtapevent = function(callback) { var tapstarttime = 0,
tapendtime = 0,
taptime = 500, //tap等待时间，在此事件下松开可触发方法
tapstartclientx = 0,
tapstartclienty = 0,
tapendclientx = 0,
tapendclienty = 0,
tapscollheight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量)
cancleclick = false; this.addeventlistener('touchstart', function() {
tapstarttime = event.timestamp; var touch = event.changedtouches[0];
tapstartclientx = touch.clientx;
tapstartclienty = touch.clienty;
cancleclick = false;
}) this.addeventlistener('touchmove', function() { var touch = event.changedtouches[0];
tapendclientx = touch.clientx;
tapendclienty = touch.clienty; if ((math.abs(tapendclientx - tapstartclientx) > tapscollheight) || (math.abs(tapendclienty - tapstartclienty) > tapscollheight)) {
cancleclick = true;
}
}) this.addeventlistener('touchend', function() {
tapendtime = event.timestamp; if (!cancleclick && (tapendtime - tapstarttime) <= taptime) {
callback();
}
})
}
} var ul = document.queryselector('ul'); for (var i = 1; i <= 20; i++) { var li = document.createelement('li');
li.innerhtml = i;
li.addtapevent(function() { var x = i; return function() {
alert(x);
}
}())
ul.appendchild(li);
} for (var j = 21; j <= 50; j++) { var li = document.createelement('li');
li.innerhtml = j;
li.onclick = function() { var x = j; return function() {
alert(x);
}
}()
ul.appendchild(li);
} </script></html>