浏览器左右滑动翻页与页面中左右滑动冲突

document.addEventListener('touchstart',function(e){
    e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
},false);

关于浏览器左右滑动翻页与页面中左右滑动冲突的问题
最近做了一个手机端的网站，用到轮播图（可以左右滑动切换上一张或下一张），发现与浏览器左右滑动前进后退发送冲突，导致轮播图无法手动切换。于是开始寻找解决方法：
第一种:

document.addEventListener('touchmove',function(event){
    event.preventDefault();
},false);

这种方法是直接禁用浏览器的滑动事件，禁止浏览器左右滑动实现前进后退，可以解决大多数浏览器的问题，不足点是用户体验偏差，如果你用的是搜狗浏览器或者小米手机自带的浏览器，这种方法不起作用。但是如果你用的是 百度浏览器 ，这种方法会导致整个页面无法滑动，只能看到可视区域的内容。所有直接这样写是存在问题的。
第二种：

$('.slideshowBox').each(function(index, el) {
    el.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, false);
});

slideshowBox是你需要手动滑动的父类，禁止当前区域的浏览器默认事件不会影响浏览器的左右滑动前进后退功能，而且所有浏览器均适配，包括上面说到的第一种方法不适用的三款浏览器。

参考: https://blog.csdn.net/zuijiao__shangyang/article/details/88837357