【兼容】移动端解决滚动穿透点击穿透

在移动端页面上，当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题
解决方法一：
css之overflow:hidden

html, body {  
    overflow: auto;  
    height: 100%;  
} 

使用这种方法时，在与饿了么前端 mint-ui 组件库中的 Infinite scroll 存在冲突，导致在无限滚动请求下一页数据的时候请求不成功，但是如果你的页面上没有分页的，这样还是可以很好的解决滚动穿透问题

解决方法二：
touchmove + preventDefault
在弹出的提示框中阻止浏览器的默认行为以及冒泡行为，在可以滑动的dom元素中取消浏览器的默认行为以及冒泡行为

let stop = document.querySelector("#cancel");  
stop.addEventListener("touchmove", (event) => {  
    event.preventDefault();  //阻止默认行为                 
    event.stopPropagation(); //阻止冒泡  
}, false)  
let cancelStop = document.querySelector(".allReason");  
cancelStop.addEventListener("touchmove", (event) => {  
    event.returnValue = true;   //取消阻止默认行为                              
    event.cancelBubble = true;  //取消阻止冒泡                          
}, false)  

使用这种方法会有一个缺点，那就是滑动其它地方，底部页面不会滚动，但是在可以滑动的页面中，将其滑动到底部或者顶部后继续滑动，底部页面任然可以滚动

点击穿透

click事件在移动端会有200-300ms的延迟，是因为手机上双击屏幕，缩放功能的存在。在手机上打开页面，快速双击时，页面会被放大。所以当你在点击第一次的时候，系统会等200-300毫秒，看你会不会点第二次，如果有第二次，则会放大当前页面内容；如果没有点第二次，才会执行点击事件。

解决方案

只用touch-----最简单的解决方案，完美解决点击穿透事件。

把页面内所有click全部换成touch事件（touchstart、touchend、tap）,需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span。

ps：之前有人教我解决滚动穿透这个问题，但是没有做记录。（很苦恼）