집 > 기사 > 웹 프론트엔드 > 슬라이딩 방향을 결정하기 위한 html5 터치 이벤트 구현

슬라이딩 방향을 결정하기 위한 html5 터치 이벤트 구현

不言원래의: 2018-06-05 16:45:562430검색

이 기사에서는 슬라이딩 방향을 결정하기 위한 html5 터치 이벤트 구현에 대한 관련 정보를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다.

터치 인터페이스에 대한 강력한 지원을 제공하기 위해 터치 이벤트는 터치 스크린이나 터치 패드에서 사용자 작업에 응답하는 기능을 제공합니다.

인터페이스

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를 사용하여 뷰의 슬라이딩 방향을 결정할 수도 있습니다. 코드는 다음과 같습니다(직접 실행할 수 있습니다. ):

Chrome 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(&#39;beforeScrollTop&#39;,beforeScrollTop);
    window.addEventListener("scroll", function() {
      var afterScrollTop = document.documentElement.scrollTop,
        delta = afterScrollTop - beforeScrollTop;
      console.log(&#39;beforeScrollTop&#39;,beforeScrollTop);
      console.log(&#39;afterScrollTop&#39;,afterScrollTop);
      if( delta === 0 ) return false;
      fn( delta > 0 ? "down" : "up" );
      beforeScrollTop = afterScrollTop;
    }, false);
  }

  scroll(function(direction) { console.log(direction) });
</script>

</body>
</html>

슬라이딩 방향을 결정하기 위한 html5 터치 이벤트 구현

관련 기사