欢迎来到-个人主页,希望本页面可以帮到您,您也可以给我在线留言,反馈建议,我愿意倾听您的声音... 留言

手机网站判断触摸方向(上下左右)

2019-06-14 14:0

$(function() {
    function mytouch() {
        var startx;//让startx在touch事件函数里是全局性变量。
        var endx;
        var el = document.getElementById('io');//触摸区域。
        function leftright() {   //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。
            if (startx > endx) {  //判断左右移动程序
                //left
                alert(1);
            } else {
                alert(2);
                //right
            }
        }
        function topbottom() {   //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。
            if (starty > endy) {  //判断上下移动程序
                //top
            } else {
                //bottom
            }
        }
        el.addEventListener('touchstart', function (e) {
            var touch = e.changedTouches;
            startx = touch[0].clientX;
            starty = touch[0].clientY;
        });
        el.addEventListener('touchend', function (e) {
            var touch = e.changedTouches;
            endx = touch[0].clientX;
            endy = touch[0].clientY;
            leftright();  //startx endx 的数据收集应该放在touchend事件后执行,而不是放在touchstart事件里执行,这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的,所以在此函数中都可以访问得到,所以只需要注意事件执行的先后顺序即可。
            topbottom();
        });
    }
    mytouch();
})