Introduction to the function of JS to realize pull-up and slide-down on the mobile terminal

By touching the screen with your finger, use touchstart and touchend to calculate the forward and backward sliding distance to determine whether it is pulling up or sliding down. Next, I will introduce to you the function of judging the pull-up and slide-down function of the js mobile terminal through the example code. Friends who are interested should take a look.

1. Touch the screen with your finger, use touchstart and touchend to calculate the front and back sliding distance, and judge whether it is up or down. Pull or slide.

2. Distance in js: The difference between pageY, clientY, and offsetY:

OffsetY: The offset distance relative to the parent node.

clientY: Relative to the browser, the scroll wheel distance is not included.

pageY: Relative to the browser, the scrolling distance of the wheel is included; in this example, pageY is used to record the position -startY when touching the screen, and record -endY when it ends. Subtract the two to judge the positive or negative. Is it moving up or down.

3. Touchstart has the touches attribute, touchend has the changedTouches attribute, and the two attributes contain pageY and pageX information respectively.

//滑动处理 
    var startX, startY; 
    document.addEventListener('touchstart',function (ev) { 
      startX = ev.touches[0].pageX; 
      startY = ev.touches[0].pageY; 
    }, false); 
    document.addEventListener('touchend',function (ev) { 
      var endX, endY; 
      endX = ev.changedTouches[0].pageX; 
      endY = ev.changedTouches[0].pageY; 
      var direction = GetSlideDirection(startX, startY, endX, endY); 
      switch(direction) { 
        case 0: 
            alert("无操作"); 
          break; 
        case 1: 
          // 向上 
          alert("up"); 
          break; 
        case 2: 
          // 向下 
          alert("down"); 
          break; 
 
        default: 
      } 
    }, false);

四、

function GetSlideDirection(startX, startY, endX, endY) { 
      var dy = startY - endY; 
      //var dx = endX - startX; 
      var result = 0; 
      if(dy>0) {//向上滑动 
        result=1; 
      }else if(dy<0){//向下滑动 
        result=2; 
      } 
      else 
      { 
        result=0; 
      } 
      return result; 
    }

The above is the detailed content of Introduction to the function of JS to realize pull-up and slide-down on the mobile terminal. For more information, please follow other related articles on the PHP Chinese website!