How to determine the user's sliding direction in H5 touch events

This time I will show you how to determine the user's sliding direction in H5 touch events. What are the precautions for determining the user's sliding direction in H5 touch events? Here is a practical case, let's take a look.

Interface

##TouchEvent

TouchEvent is a type that describes the movement of a finger on a touch plane (touch screen, Touchpad, etc.) state change events. This type of event is used to describe one or more touch points, allowing developers to detect the movement of touch points, the increase and decrease of touch points, etc. Each Touch object represents a touch point; each touch point is described by its position, size, shape, pressure level, and target element. The TouchList object represents a list of multiple touch points.

Types of touch events

In order to distinguish touch-related state changes, there are many type of touch event. You can determine what type the current event is by checking the TouchEvent.type property of the touch event

1. touchstart: Fires when the user places a touch point on the touch surface.

2. touchend: Triggered when a touch point is removed from the touch surface by the user (when the user lifts a finger off the touch surface).

3. touchmove: Triggered when the user moves a touch point on the touch plane.

4. touchcancel: Triggered when the contact is interrupted for some reason.

Determine the sliding direction

The basic principle is to record the coordinates of the start sliding (touchStart) and the end sliding (touchEnd) position, and then perform relative position calculations.

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) = -45 && angle = 45 && angle = -135 && angle = 135 && angle = -180 && angle <p style="text-align: left;"><span style="color: #ff0000">Native JS method<strong></strong></span></p>In addition to the new methods in H5, you can also use native JS to determine the sliding direction of the view. The code is as follows ( Can be run directly): <p style="text-align: left;"></p>It should be noted that chrome’s document.body.scrollTop is always 0 and needs to be changed to document.documentElement.scrollTop<p style="text-align: left;"></p><pre class="brush:php;toolbar:false">nbsp;html>


  <meta>
  <title> 脚本之家(jb51.net)</title>
  <style>
    p {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      overflow: scroll;
    }
  </style>


<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">HEllo word</h1>
<h1 id="HEllo-word">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>

I believe you have mastered it after reading the case in this article. Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to verify the email address format

CSS float usage tips

The above is the detailed content of How to determine the user's sliding direction in H5 touch events. For more information, please follow other related articles on the PHP Chinese website!