移動端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後消失