移动端touch click事件的比较
1、touch click事件的执行顺序: touchstart > touchmove > touchend > click
2、touchmove click事件互斥,即touchmove触发执行，click事件不再执行
3、touch阶段取消掉 click 事件：touch事件内调用：e.preventDefault()
点透现象
点透发生的条件:
A 和 B不是后代继承关系(如果是后代继承关系的话，就直接是冒泡之类的话题了)
A发生touch(也可以是click)后立即消失,B事件绑定click
A z-index大于B，即A显示在B浮层之上
点透发生的原因:
当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<script type="text/javascript">
(function(doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(clientWidth === undefined) return;
docEl.style.fontSize = (clientWidth / 750) * 100 + 'px';
};
if(doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);
</script>
<style type="text/css">
#parent {
position: relative;
}
#up {
position: absolute;
width: 100%;
height: 4rem;
z-index: 1;
background: red;
}
#down {
width: 100%;
height: 5rem;
background: green;
}
</style>
</head>
<body>
<div id="parent">
<div id="up">上层div</div>
<div id="down" class="dowm">下层div</div>
</div>
</body>
<script type="text/javascript">
let up = document.getElementById('up');
let down = document.getElementById('down');
up.addEventListener('touch', function(e) {
up.style.display = 'none';
});
up.onclick = function() {
console.log('down莫名被点击了');
}
</script>
</html>解决方式：
1、A touch 事件取消click事件 即 e.preverDefault
2、A 元素延迟0.3s后消失