码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-26 01:07:15      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:var   func   listener   page   fun   事件   doc   function   eve   

        // 判断上下滑动
        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触摸事件-判断上下滑动

标签:var   func   listener   page   fun   事件   doc   function   eve   

原文地址:http://www.cnblogs.com/zhenguoli/p/7594572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!