집 > 기사 > 웹 프론트엔드 > H5 터치 이벤트에서 사용자의 슬라이딩 방향을 결정하는 방법

H5 터치 이벤트에서 사용자의 슬라이딩 방향을 결정하는 방법

php中世界最好的语言원래의: 2018-06-13 14:37:043365검색

이번에는 H5 터치 이벤트에서 사용자의 슬라이딩 방향을 판단하는 방법을 보여드리겠습니다. H5 터치 이벤트에서 사용자의 슬라이딩 방향을 판단할 때 주의사항은 무엇인가요?

Interface

TouchEvent

TouchEvent는 터치 표면(터치 스크린, 터치 패드 등)에서 손가락의 상태 변화를 설명하는 이벤트 유형입니다. 이러한 유형의 이벤트는 하나 이상의 터치 포인트를 설명하는 데 사용되므로 개발자는 터치 포인트의 움직임, 터치 포인트의 증가 및 감소 등을 감지할 수 있습니다. 각 터치 개체는 터치 지점을 나타냅니다. 각 터치 지점은 위치, 크기, 모양, 압력 수준 및 대상 요소로 설명됩니다. TouchList 객체는 여러 터치 포인트 목록을 나타냅니다.

터치 이벤트 유형

터치 관련 상태 변경을 구별하기 위해 여러 유형의 터치 이벤트가 있습니다. 터치 이벤트의 TouchEvent.type 속성을 확인하여 현재 이벤트 유형을 확인할 수 있습니다.

touchstart: 사용자가 터치 표면에 터치 포인트를 배치하면 실행됩니다.
touchend: 사용자가 터치 표면에서 터치 포인트를 제거할 때(사용자가 터치 표면에서 손가락을 떼면) 트리거됩니다.
touchmove: 사용자가 터치 평면에서 터치 포인트를 이동할 때 트리거됩니다.
touchcancel: 어떤 이유로 연락이 중단될 때 트리거됩니다.

슬라이딩 방향 결정

기본 원리는 슬라이딩 시작(touchStart)과 슬라이딩 끝(touchEnd)의 좌표 위치를 기록하고 상대 위치를 계산하는 것입니다.

touchStart:function(e){
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
    e = e || window.event;
 },
touchEnd:function(e){
    const that = this;
    endX = e.changedTouches[0].pageX;
    endY = e.changedTouches[0].pageY;
    that.upOrDown(startX,startY,endX,endY);
},
upOrDown:function (startX, startY, endX, endY) {
    const that = this;
    let direction = that.GetSlideDirection(startX, startY, endX, endY);
    switch(direction) {
      case 0:
        console.log("没滑动");
        break;
      case 1:
        console.log("向上");
        break;
      case 2:
        console.log("向下");
        break;
      case 3:
        console.log("向左");
        break;
      case 4:
        console.log("向右");
        break;
      default:
        break;
    }
  },
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
  GetSlideDirection:function (startX, startY, endX, endY) {
    const that = this;
    let dy = startY - endY;
    let dx = endX - startX;
    let result = 0;
    //如果滑动距离太短
    if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    let angle = that.GetSlideAngle(dx, dy);
    if(angle >= -45 && angle < 45) {
      result = 4;
    }else if (angle >= 45 && angle < 135) {
      result = 1;
    }else if (angle >= -135 && angle < -45) {
      result = 2;
    }
    else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  },
  //返回角度
  GetSlideAngle:function (dx, dy) {
    return Math.atan2(dy, dx) * 180 / Math.PI;
  }

네이티브 JS 메서드

H5의 새로운 메서드 외에도 네이티브 JS를 사용하여 뷰의 슬라이딩 방향을 결정할 수도 있습니다. 코드는 다음과 같습니다(직접 실행 가능).

크롬은 document.body에 부정적인 영향을 미친다는 점에 유의해야 합니다. .scrollTop은 항상 0이었고 document.documentElement.scrollTop

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> 脚本之家(jb51.net)</title>
  <style>
    p {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      overflow: scroll;
    }
  </style>
</head>
<body style="overflow: scroll">
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<script>
  function scroll( fn ) {
    var beforeScrollTop = document.documentElement.scrollTop,
      fn = fn || function() {};
    console.log('beforeScrollTop',beforeScrollTop);
    window.addEventListener("scroll", function() {
      var afterScrollTop = document.documentElement.scrollTop,
        delta = afterScrollTop - beforeScrollTop;
      console.log('beforeScrollTop',beforeScrollTop);
      console.log('afterScrollTop',afterScrollTop);
      if( delta === 0 ) return false;
      fn( delta > 0 ? "down" : "up" );
      beforeScrollTop = afterScrollTop;
    }, false);
  }
  scroll(function(direction) { console.log(direction) });
</script>
</body>
</html>

으로 변경해야 합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 알고 싶으시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!