h5触摸事件-判断上下滑动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5触摸事件-判断上下滑动相关的知识,希望对你有一定的参考价值。

        // 判断上下滑动
        var startX = 0,
        startY = 0;
    function touchStart(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //记录触点初始位置
            startX = x;
            startY = y;
        }catch(e){
            console.log(e.message)
        }
    }

    function touchMove(evt){
        try{
            var touch = evt.touches[0], //获取第一个触点
                    x = Number(touch.pageX), //页面触点X坐标
                    y = Number(touch.pageY); //页面触点Y坐标
            //判断滑动方向
            if (y - startY<0) {
                console.log(‘上滑了!‘);
                var mainView = myApp.addView(‘.view-main‘, {domCache: true});
                mainView.router.load({pageName: ‘friendCircle‘});
            }
        }catch(e){
            console.log(e.message);
        }
    }

    // function touchEnd(evt){
    //     try{
    //         var touch = evt.touches[0], //获取第一个触点
    //                 x = Number(touch.pageX), //页面触点X坐标
    //                 y = Number(touch.pageY); //页面触点Y坐标
    //         //判断滑动方向
    //         if (y - startY<0) {
    //             console.log(‘上滑了!‘);
    //         }
    //     }catch(e){
    //         console.log(e.message);
    //         console.log("end");
    //     }
    // }

    //绑定事件
    function bindEvent(){
        document.addEventListener(‘touchstart‘,touchStart,false);
        document.addEventListener(‘touchmove‘,touchMove,false);
        // document.addEventListener(‘touchend‘,touchEnd,false);
    }


    bindEvent();

参考:http://blog.csdn.net/bbsyi/article/details/52108599

以上是关于h5触摸事件-判断上下滑动的主要内容,如果未能解决你的问题,请参考以下文章

为啥h5页面可以上下滑动,却不可以左右滑动

【Axure】触摸屏上下滑动效果

H5移动端页面加入canvas可滑动代码条件下android手机点击input重复弹出键盘

H5中的touch事件

iOS UICollectionView左右滚动和上下滑动处理

ViewPager里面的TextView拦截触摸事件