1.3移动端点击事件－－－tap点透事件
点透现象有两种：
1.事件冒泡：
点击蒙层A,如果下面有一个B（button按钮／a标签／input等）。tap点击A后，下方元素如果绑定了click事件的话，事件会被触发。
原因：
zepto的tap是通过事件代理实现的，即document上绑定了touch事件，通过事件冒泡触发tap事件。
点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发，而在冒泡到document之前，用户手的接触屏幕(touchstart)和离开屏幕(touchend)是会触发click事件的,因为click事件有延迟触发(这就是为什么移动端不用click而用tap的原因)(大概是300ms,为了实现safari的双击事件的设计)，所以在执行完tap事件之后，弹出来的选择组件马上就隐藏了，此时click事件还在延迟的300ms之中，当300ms到来的时候,click到的其实不是完成而是隐藏之后的下方的元素，如果正下方的元素绑定的有click事件此时便会触发，如果没有绑定click事件的话就当没click，但是正下方的是input输入框(或者select选择框或者单选复选框)，点击默认聚焦而弹出输入键盘，这就是常出现的“点透”的情况。
解决方案：
A.addEventListener('touchend', function(e) {
e.preventDefault();
});
2.A B有层级关系，点击A后A消失
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
position: relative;
}
#box1 {
position: absolute;
z-index: 1;
background: #abcdef;
width: 500px;
height: 500px;
}
#box2 {
width: 500px;
height: 500px;
background: #fedcba;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">
</div>
<div id="box2">
</div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener('touchstart', function(e) {
box1.style.display = 'none';
});
box2.onclick = function() {
console.log('box2被点击了');
}
</script>
</html>
点透.gif
原因：
当手指触摸到屏幕的时候，会触发两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从Dom Tree上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了.
解决方案：
setTimeout(function(){
A.style.display = 'none';
}, 300);
有的人说 当A z-index大于B时也会触发点透，但是我用手机和浏览器去测试没发现
