前言
移动端事件主要有触摸、滑动、点击、拖拽、双击、旋转、放大缩小，下面主要会介绍前三种事件。
触摸
- touchstart：手指触摸到屏幕会触发
- touchmove：当手指在屏幕上移动时，会触发
- touchend：当手指离开屏幕时，会触发
- touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
swipe类滑动事件
- swipe：手指在屏幕上滑动时会触发
- swipeLeft：手指在屏幕上向左滑动时会触发
- swipeRight：手指在屏幕上向右滑动时会触发
- swipeUp：手指在屏幕上向上滑动时会触发
- swipeDown：手指在屏幕上向下滑动时会触发
点击事件
tap
- 标准事件中没有tap事件，tap事件是zepto，使用touch进行封装的
- tap: 手指碰一下屏幕会触发
- longTap: 手指长按屏幕会触发
- singleTap: 手指碰一下屏幕会触发
- doubleTap: 手指双击屏幕会触发
click
- 移动端的click有300ms延迟的问题，在移动端浏览器中，连续两次点击是缩放操作，所以在用户点击屏幕后，浏览器会检查在300ms内是否有另一次点击，如果没有则触发click事件。因为有延迟，所以尽量不使用click做为点击事件
- 可以使用touchstart代替点击事件，但前提是同一对象上不能同时绑定一个单击事件和一个滑动事件
点透问题
- 原因 当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过 捕获，处理, 冒泡 一系列流程处理完成后， 才回去触发click事件
- 场景 tap和click不能混用 A 和 B不是后代继承关系(如果是后代继承关系的话，就直接是冒泡子类的话题了) A发生touch， A touch后立即消失， B事件绑定click A z-index大于B，即A显示在B浮层之上
- 解决方案
可以touch阶段取消掉系统触发的click事件，也可以让消失的元素延迟200-300ms
HTML代码 HTML codes
<body>
<div>
<div id="A">
</div>
<div id="B">
</div>
</div>
</body>
<script type="text/javascript">
var A = document.getElementById("A");
var B = document.getElementById("B");
A.addEventListener('touchstart', function(e) {
A.style.display = 'none';
});
A.addEventListener('touchend', function(e) {
e.preventDefault();
});
B.onclick = function() {
console.log('兄弟元素B被点击了');
}
</script>