点透问题及解决
一、问题描述
实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。
二、例子
下面通过多种方式来模拟感受点透：
<div class="tap">tap</div>
<div class="click">click</div>
1、使用原生js
直接给两个盒子绑定点击事件：
var tap = document.querySelector('.tap');
var click = document.querySelector('.click');
//一、为tap添加touch事件 touch事件只是针对移动端，pc端无效
tap.addEventListener('touchstart',function(e) {
tap.style.visibility = "hidden";
});
click.addEventListener('click',function(e) {
click.style.backgroundColor = "blue";
})
在移动端如下效果：仅仅点击tap盒子，tap盒子隐藏，click盒子也被触发改变了背景颜色。
一、问题描述
实际学习与工作中可能会有这样的需求：在移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，然而这并不是我想要的效果。
二、例子
下面通过多种方式来模拟感受点透：
<div class="tap">tap</div>
<div class="click">click</div>
1、使用原生js
直接给两个盒子绑定点击事件：
var tap = document.querySelector('.tap');
var click = document.querySelector('.click');
//一、为tap添加touch事件 touch事件只是针对移动端，pc端无效
tap.addEventListener('touchstart',function(e) {
tap.style.visibility = "hidden";
});
click.addEventListener('click',function(e) {
click.style.backgroundColor = "blue";
})
在移动端如下效果：仅仅点击tap盒子，tap盒子隐藏，click盒子也被触发改变了背景颜色。
问题1：点透
问题2：touch在PC端无效
问题3：click事件在移动端有延迟约300ms的问题（详细见移动端click延迟和tap事件）
2、使用自己封装的tap事件
封装的tap事件代码详见上一篇：移动端click延迟和tap事件
idcast.tap(tap,function(e){
tap.style.visibility = "hidden";
})
idcast.tap(click,function(e) {
click.style.backgroundColor = "blue";
})
结果：移动端没有出现点透，但是PC端无效。
问题1：封装的tap事件由touchstart和touchend实现，touch事件在pc端无效
3、使用zepto
$('.tap').on("tap",function() {
$(this).hide();//zepto中tap事件在touch.js中
});
$('.click').on("click",function() {
$(this).css("backgroundColor","blue");
})
该版本zepto的点透问题已经解决可以放心使用，但是PC端仍然无效。
三、解决
综合上述：web想同时移动端和PC端呈现，又要解决点透问题，可以直接使用一个fastclick.js插件：fastclick
如下的使用：可以完美解决以上三者问题
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);//给body绑定attach事件，是body中所有的元素都添加了attach事件
}, false);
}
tap.addEventListener('click',function() {
$(this).hide();
})
click.addEventListener('click',function() {
$(this).css("backgroundColor","blue");
})
当然不是拿来主义，而是充分利用各种工具以提高自己学习和工作的效率。
