监听鼠标侧滑(适应移动端)

@跃焱邵隼
代码:
function ysSlideDir(data) {
    function f(eventName1,eventName2){
        if(eventName1=='touchstart'||eventName2=='touchmove'){
            if(data.preventDefault==true){
                $(data.className).css({ //要在滑动之前提前加 不然；第一次滑动后才生效
                    'touch-action':'none'
                });
            }
        }
        var downX;
        var downY;
        var upX;
        var upY;
        $(document).on(eventName1,data.className,function (e) {
            //判断事件名字做相应处理
            if(eventName1=='touchstart'||eventName2=='touchmove'){
                //e.preventDefault();//不起作用  通过其他方式;如上；要在滑动之前提前加 不然；第一次滑动后才生效
                var touch = e.originalEvent.targetTouches[0];
                downX=parseInt(touch.pageX);
                downY=parseInt(touch.pageY);
            }else{
                downX=parseInt(e.pageX);
                downY=parseInt(e.pageY);
            }
           // 通过one方法 绑定一次就可以了。
            $(this).one(eventName2,function (e) {
                //判断事件名字做相应处理
                if(eventName1=='touchstart'||eventName2=='touchmove'){
                    var touch = e.originalEvent.targetTouches[0];
                    upX=parseInt(touch.pageX);
                    upY=parseInt(touch.pageY);
                }else{
                    upX=parseInt(e.pageX);
                    upY=parseInt(e.pageY);

                }
                //有时只需要执行一个;所以用上下差比较左右差 再选择实行哪一个;
                if(downX>upX+5&&(downX-upX>=Math.abs(downY-upY))){  //以5px为'手抖'值
                    if(data.mouseLeftSlide){
                        data.mouseLeftSlide();

                    }
                }else if(downX+5<upX&&(Math.abs(downX-upX)>=Math.abs(downY-upY))){
                    if( data.mouseRightSlide){
                        data.mouseRightSlide();

                    }
                }else if(downY>upY+5&&(Math.abs(downX-upX)<Math.abs(downY-upY))){  //以5px为'手抖'值
                    if(data.mouseTopSlide){
                        data.mouseTopSlide();

                    }
                }else if(downY+5<upY&&(Math.abs(downX-upX)<Math.abs(downY-upY))){
                    if(data.mouseBottomSlide){
                        data.mouseBottomSlide();

                    }
                }

               $(this).off(eventName2); // 虽然one方法执行一次，便清除，这里我们再自己清除一次以防万一
            })


        });
    }

    f('mousedown','mouseup');

    //顺便监听触屏端侧滑
    f('touchstart','touchmove');
   /*
    PS：用touchmove事件获取终点坐标，而不是用touchend事件，是因为当你只是点击屏幕的时候，就会触发touchEnd事件，
    但是不会触发touchMove事件。这样会造成touchEnd中取得的endX，从而造成endY值不准确。比如先滑动再点击，可能同样会触发滑动事件。
   */
};

ysSlideDir({
    className:'body',
    mouseTopSlide:function () {
      alert("上滑了")
    },
    mouseBottomSlide:function () {
        alert("下滑了")
    },
   mouseLeftSlide:function () {
        alert("左滑了")
    },
   mouseRightSlide:function () {
        alert("右滑了")
    },
    preventDefault:true //false 这里只给移动端添加;因为web端基本用不到 ：阻止默认事件

});