移动端浏览器左滑右滑换页解决方案

移动端浏览器左滑右滑换页解决方案

在浏览器中我们常常会做例如登录图片验证等需要左右滑动的组件，但我们会发现一个问题就是在浏览器中左右滑动的时候会触发浏览器事件，我们本意的验证滑动行为，在浏览器上无法分辨，默认为翻页的触发

为了解决这个问题可以使用简单的css方法

*	{

 touch-action:none;

 touch-action:pan-y;

}

​ 1、touch-action:none;属性将取消浏css览器的X轴Y轴默认行为，这个阻止了左右翻页的默认行为的同时，也阻止了上下滑动的行为，显然我们不希望它阻止Y轴的上下翻滚，ontouch移动端事件不在阻止范围

​ 2、 touch-action:pan-y;此属性将赋予给Y轴的上下滚动行为，这两个相互配合正好解决了我们的问题

​ 3、通配符*大家都不陌生，并不是把上面的css属性添加到html,body上就万事大吉，准确的说需要你添加到左右滑动的事件元素上才可以，而有些组件的事件源并不是在html,body上所以当我们不确定是什么地方添加的时候，添加通配符*是最好的解决办法，如果某个地方希望

注：Vue开发如果希望只当前页面生效就在style标签里加入scoped，不加则是所以页面都生效

问题：为什么左右滑动的时候会翻页

​ 这是因为当操作元素的时候行为被浏览器捕获，而浏览器不会做区分，这是浏览器的默认行为，所以也可以使用e.preventDefault()的js方法阻止浏览器的默认行为

感兴趣的同学可以看看touch-action相关事件