touch监听判断手指的上滑,下滑,左滑,右滑,事件监听

时间:2023-03-09 18:19:40
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>