语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>判断手机的左右滑动js代码

判断手机的左右滑动js代码

2019/3/15 11:12:59 0人评论 357次 作者:admin

Javascript左右滑动代码手指touch屏幕的整个过程,会派发touchstart、touchmove、touchend三个事件,对这三个事件设置相应函数,通过移动过程中位置的变化计算出偏移值,进行对应的设置。…

html随便写就可以  记得id要对应

<body> 

    <div style="width: 100%;height: 3000px;background: #08c;" id="io"> 

   

    </div> 

</body> 

Javascript左右滑动代码

$(function() {  

    function judge() {  

        var startx;//让startx在touch事件函数里是全局性变量。  

        var endx;  

        var el = document.getElementById('io');//触摸区域。  

        function cons() {   //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。  

            if (startx > endx) {  //判断左右移动程序  

                alert("left");  

            } else {  

                alert("right");  

            }  

        }  

  

        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;  

            cons();  //startx endx 的数据收集应该放在touchend事件后执行,而不是放在touchstart事件里执行,这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的,所以在此函数中都可以访问得到,所以只需要注意事件执行的先后顺序即可。  

        });  

    }  

  

    judge();  

})


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮