关于浏览器左右滑动翻页与页面中左右滑动冲突的问题

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

第一种：
document.addEventListener('touchmove',function(event){
	event.preventDefault();
},false);

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

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

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

滑动事件左右滑动：

function slideEvent(id) {
    var UlWidth = 0;
    var touchStart, touchEnd, moveLength, startML, maxML;
    var $shop2 = $('#' + id);
    $shop2.find('li').each(function(){
        UlWidth += $(this).outerWidth();
    })
    $shop2.width(UlWidth);
    maxML = UlWidth - $(window).width();
    if(maxML > 0){
        $shop2.bind('touchstart', function(e){
            touchStart = e.originalEvent.targetTouches[0].pageX;
            startML = $shop2.css('margin-left');
        }).bind('touchmove', function(e){
            touchEnd = e.originalEvent.targetTouches[0].pageX;
            moveLength = touchEnd - touchStart + parseInt(startML);
            $shop2.css('margin-left', moveLength)
        }).bind('touchend', function(){
            if(moveLength > 0){
                moveLength = 0;
            }else if(moveLength < -maxML){
                moveLength = -maxML;
            }
            $shop2.animate({'marginLeft': moveLength}, 200);
        })
    }
}
slideEvent('shop2');


注：id 为绑定的 唯一标识如：

<div id="shop2"></div>

在使用scroll-view组件的时候发觉无法左右滑动，经过测试才
发觉有一个坑。
直接用这个组件的时候还不可以左右滑动，还要设置一下样式才
可以。

需要设置的就是这个white-space属性为nowrap，也就是强制
不换行，这样才可以左右滑动。


当然也可以用一个view来包裹scroll-view组件，然后设置这个
view的white-space也是可以的。

移动端左右滑动事件 （例：放大图片左右滑动预览）
<div id="box" style="width: 100%;height: 490px;background: #f00;margin: auto;overflow: hidden;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    //定义变量，用于记录坐标和角度
    var startx, movex, endx, nx;
    //开始触摸函数，event为触摸对象
    function touchs(event) {
      event.preventDefault();//阻止浏览器默认滚动事件
      
      if (event.type == "touchstart") {//通过if语句判断event.type执行了哪个触摸事件
        // console.log("开始");
        var touch = event.touches[0];//获取开始的位置数组的第一个触摸位置
        startx = Math.floor(touch.pageX);//获取第一个坐标的X轴
      } else if (event.type == "touchmove") {//触摸中的坐标获取
        // console.log("‘滑动中‘");
        var touch = event.touches[0];
        movex = Math.floor(touch.pageX);
      } else if (event.type == "touchend" || event.type == "touchcancel") {//当手指离开屏幕或系统取消触摸事件的时候
        endx = Math.floor(event.changedTouches[0].pageX);//获取最后的坐标位置
        // console.log("‘结束‘");
        nx = endx - startx;//获取开始位置和离开位置的距离
        //判断滑动方向
        if (nx <= -10) {
          console.log("左滑了")
          return false;
        }
        if (nx >= 10) {
          console.log("右滑了")
          return false;
        }
        if (nx >= -9) {
          console.log("点击了")
          return false;
        }
      }
    }
    var box = document.getElementById("box");//获取DOM标签
    //添加触摸事件的监听，并直行自定义触摸函数
    box.addEventListener("touchstart", touchs, false);
    box.addEventListener("touchmove", touchs, false);
    box.addEventListener("touchend", touchs, false);
  </script>