如果在触屏的网页中，你为一个dom元素绑定’touchstart’，’touchend’事件来实现点击互动，那么如果你拖动屏幕时触摸到这个dom也会触发这两个事件，因为move的过程中也会执行start和end，这违背了我们的交互需要。
显然，我们要想办法规避这个问题。
如果你用jqueryMobil或者zepto，只要用里面针对触屏的事件，是不会碰到这个问题的。
基本思路就是重写了触发的的方法，根据条件来判断当前事件状态，在’touchend’的时候来决定当前用户是用了点击还是用了移动。
如果不想引入类库要怎么做。
我们增加一个函数MBP(全称为Mobile Boilerplate，该点击事件函数是该项目中的一部分)。
整个函数参考《HTML5移动Web开发实践》四章9节的代码内容
但是书里的内容有些问题，我对里面的内容做了一些修改，我们看下面代码。
函数部分
(function(document){//防止误点击
window.MBP = window.MBP || {};
MBP.fastButton = function (element, handler) {//函数入口
this.element = element;
this.handler = handler;
if (element.addEventListener) {//这里对选用的触发事件做了区分，保证触屏和非触屏用的是不同的事件绑定。
if (document.hasOwnProperty("ontouchstart")) {
element.addEventListener('touchstart', this, false);
}else{
element.addEventListener('click', this, false);
}
}
};
MBP.fastButton.prototype.handleEvent = function(event) {//监听触发事件类型
switch (event.type) {
case 'touchstart': this.onTouchStart(event); break;
case 'touchmove': this.onTouchMove(event); break;
case 'touchend': this.onClick(event); break;
case 'click': this.onClick(event); break;
}
};
MBP.fastButton.prototype.onTouchStart = function(event) {
//onTouchStart方法监听touchmove和touchend事件，Stoppropagation函数用来防止事件在监听中传递，阻止冒泡，即只在当前方法体内寻找当前事件的监听器
event.stopPropagation();
this.element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
};
MBP.fastButton.prototype.onTouchMove = function(event) {//如果触摸偏移10像素以上判断为move事件
if(Math.abs(event.touches[0].clientX - this.startX) > 10 ||
Math.abs(event.touches[0].clientY - this.startY) > 10 ) {
this.reset();
}
};
MBP.fastButton.prototype.onClick = function(event) {//如果不是其他可能，执行事件
event.stopPropagation();
this.reset();
this.handler(event);
if(event.type == 'touchend') {
MBP.preventGhostClick(this.startX, this.startY);
}
};
MBP.fastButton.prototype.reset = function() {//核心方法，移除move和touched的事件，以保证做正确的事件
this.element.removeEventListener('touchend', this, false);
document.body.removeEventListener('touchmove', this, false);
};
MBP.preventGhostClick = function (x, y) {
MBP.coords.push(x, y);
window.setTimeout(function (){
MBP.coords.splice(0, 2);
}, 2500);
};
MBP.ghostClickHandler = function (event) {//这部分是对不支持touch事件设备的兼容
for(var i = 0, len = MBP.coords.length; i < len; i += 2) {
var x = MBP.coords[i];
var y = MBP.coords[i + 1];
if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
};
if (document.addEventListener) {//为文档中其他click事件添加防止误点击操作
document.addEventListener('click', MBP.ghostClickHandler, true);
}
MBP.coords = [];
})(document);
如何使用
var btn = document.getElementById('domId');
btnTouch = new MBP.fastButton(btn,function(){alert('点击成功')});
关于触摸事件的延伸——点透问题
在移动设备中用了触摸点击事件会产生一系列的点透问题，可以转到我文章中的《关于移动设备“点透”的问题》查看解决方法。
其他补充
不要在该方法生成的事件中添加alert事件，不然在ios（我的环境是ios6）中触发后会在下一次触摸屏幕的时候触发touchstart事件，执行未被销毁的alert产生问题。