码迷,mamicode.com
首页 > 移动开发 > 详细

js判断手机的左右滑动

时间:2017-03-08 13:53:06      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:变量   clientx   rtx   代码   csharp   左右滑动   listen   event   body   

js代码

$(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();  
})  

 

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

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

  

js判断手机的左右滑动

标签:变量   clientx   rtx   代码   csharp   左右滑动   listen   event   body   

原文地址:http://www.cnblogs.com/turbo12138/p/6518621.html

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