zoukankan      html  css  js  c++  java
  • touch监听判断手指的上滑,下滑,左滑,右滑,事件监听

    判断滑动的方向和距离,来实现一定的效果,比如返回上一页等等

    <body>
            
            
            <script>
                $(function(){
                        //给body强制定义高度
                        var windowHeight = $(window).height(),
                      $body = $("body");
                      // console.log($(window).height()); //627
                      // console.log($('body').height()); //0
                      $body.css("height", windowHeight); //重要代码
                    
                    $("body").on("touchstart", function(e) {
                    //e.preventDefault();//会使所有的触屏都失效,不能用
                    startX = e.originalEvent.changedTouches[0].pageX,
                    startY = e.originalEvent.changedTouches[0].pageY;
                  });
                  $("body").on("touchmove", function(e) {
                    //e.preventDefault();
                    moveEndX = e.originalEvent.changedTouches[0].pageX,
                    moveEndY = e.originalEvent.changedTouches[0].pageY,
                    X = moveEndX - startX,
                    Y = moveEndY - startY;
                
                    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
                      alert("right");
                    }
                    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
                      alert("left");
                    }
                    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
                      alert("bottom");
                    }
                    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
                      alert("top");
                    }
                    else{
                      alert("just touch");
                    }
                  });
                })
            </script>
  • 相关阅读:
    人工智能,垂直领域
    西方企业该向中国式创新学什么?
    [Leetcode 6] ZigZag问题的一种新思路
    Unknown column &#39;*&#39; in &#39;field list&#39; 异常解决
    多媒体——图像文件大小的计算
    Lucky Number
    win7 64位系统下进入debug
    Chromium网页DOM Tree创建过程分析
    做好长期奋斗的准备
    IP寻址和子网运算
  • 原文地址:https://www.cnblogs.com/LChenglong/p/6769897.html
Copyright © 2011-2022 走看看