分类： JavaScript

问题

如果给一个dom添加触摸事件以后，那这个dom里面子元素的触摸事件还可以触发么？这是最近项目中遇到的一个问题。

之后我做了个测试。

测试

测试环境：iphone4&ios6，lumia920&wp8，某安卓机

测试的点击方式：默认的click、MBP、Fastclick、Zepto&tap。

测试演示：http://gaofeiyu.com/demo/click/click.html

演示的基本逻辑是黄色块点击后会隐藏自己，黑色的底色块和红色块点击后会改变色块内的html并记录点击次数。

演示里面可以看出click和Fastclick的子元素和父元素都会触发，而MBP和tap事件只有当前dom会触发。

总结

在移动项目中还是Zepto和Fastclick混用的方案比较合适，无论点透还是这种逻辑混乱的交互都搞得通。

建议在项目中尽量用一种触摸事件触发方式，不然碰到问题改代码会很难看。我这边最开始用的是tap，之后发现各种问题搞得不得不做很多多余的操作，在优化后还是统一用了Fastclick，父子元素的问题，也只能换个方向去解决，毕竟这个问题本身的用户体验就不是很好。

我还顺便写了个连点的小样例在演示里面，有心的人可以分析一下。

“点透”是什么

你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件（或打开链接）。我暂时定义为这是一个“点透”现象。

如何产生的

一般来说我们用原生的touch事件,还有jqueryMobile和zepto的tap可能会产生上面的问题。
相关的内容可以参考http://blog.youyo.name/archives/zepto-tap-click-through-research.html

注：当你点击链接页面刷新太快也会出现点透状况，这个是要在测试中特别注意的。

来说点转载文章中没说到的

规避这个点透现象除了上面参考文章说的方法，有更简单的方法。
推荐方法是引入Fastclick.js插件，该插件重写了默认的click事件，你可以通过
FastClick.attach(document.body);

来对整个文档操作，也可以对某节点单独操作。
那么我之前写的《触屏网页防止误点击（GHOSTCLICK）》中的 MBP 也可以避免这个问题，选择你喜欢的方法去解决。

如果在触屏的网页中，你为一个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产生问题。