移动端事件穿透：点击穿透和滑动穿透

前些日子面试的时候被问及移动端的滑动穿透问题，当时没有滑动穿透的概念(其实平时的工作从滑动穿透的问题已经默认解决掉了)，上网查了一下，所以有了以下的个人小结：

移动端事件穿透：点击穿透||滑动穿透

移动端，手指点击一个元素，会经过：touchstart --> touchmove --> touchend --> click

点击穿透： click 事件机制：延迟300ms执行，主要为了区别移动端 double tap 事件

场景：

• 当前页面点击蒙层，蒙层消失，蒙层下的dom的点击事件被触发
• 跨页面点击，点击当前页面的dom元素，跳转至新页面，新页面的当前位置的click事件被触发

解决方案：

1. 当前dom的click事件延迟(大于300ms)执行即可
2. 使用 touchend 事件(此时需要主页 a href 属性默认就是 click 事件)
3. fastclick 库

滑动穿透：

场景：

• 固定定位的遮罩层下方的dom结构超出屏幕宽度，遮罩层显示时下方的dom结构依然可以滚动

解决方案：

1. 遮罩层阻止默认 touchmove 事件

$('.modals').on('touchmove', function(event) {
    event.preventDefault();
});

1. 遮罩层显示时处理 body{overflow:hidden;}，一定要在关闭遮罩层时处理掉 body{overflow: initial;}
2. fastclick 库