Heim > Artikel > Web-Frontend > So bestimmen Sie die Gleitrichtung des Benutzers in H5-Touch-Ereignissen

So bestimmen Sie die Gleitrichtung des Benutzers in H5-Touch-Ereignissen

php中世界最好的语言Original: 2018-06-13 14:37:043363Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Gleitrichtung des Benutzers bei H5-Berührungsereignissen bestimmen. Welche Vorsichtsmaßnahmen gibt es, um die Gleitrichtung des Benutzers bei H5-Berührungsereignissen zu bestimmen?

Schnittstelle

TouchEvent

TouchEvent ist ein Typ, der die Bewegung eines Fingers beschreibt Zustandsänderungsereignisse einer Touch-Oberfläche (Touchscreen, Touchpad usw.). Diese Art von Ereignis wird verwendet, um einen oder mehrere Berührungspunkte zu beschreiben, sodass Entwickler die Bewegung von Berührungspunkten, die Zunahme und Abnahme von Berührungspunkten usw. erkennen können. Jedes Touch-Objekt stellt einen Berührungspunkt dar; jeder Berührungspunkt wird durch seine Position, Größe, Form, Druckstufe und Zielelement beschrieben. Das TouchList-Objekt stellt eine Liste mehrerer Berührungspunkte dar.

Typen von Berührungsereignissen

Um berührungsbezogene Zustandsänderungen zu unterscheiden, gibt es sind viele Arten von Berührungsereignissen. Sie können feststellen, um welchen Typ es sich bei dem aktuellen Ereignis handelt, indem Sie die TouchEvent.type-Eigenschaft des Berührungsereignisses überprüfen.

touchstart: Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsoberfläche platziert.
Touchend: Wird ausgelöst, wenn ein Berührungspunkt vom Benutzer von der Touchoberfläche entfernt wird (wenn der Benutzer einen Finger von der Touchoberfläche abhebt).
touchmove: Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsebene bewegt.
touchcancel: Wird ausgelöst, wenn der Kontakt aus irgendeinem Grund unterbrochen wird.

Gleitrichtung bestimmen

Das Grundprinzip besteht darin, die Koordinaten des Startgleitens (touchStart) zu erfassen und die Endgleitposition (touchEnd) und führen Sie dann relative Positionsberechnungen durch.

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;
  }

Native JS-Methode

Zusätzlich zu den neuen Methoden in H5 können Sie auch native JS verwenden, um die Gleitrichtung des zu bestimmen Ansicht. Der Code lautet wie folgt (Kann direkt ausgeführt werden):

Es ist zu beachten, dass document.body.scrollTop von Chrome immer 0 ist und in document.documentElement.scrollTop geändert werden muss

<!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>

Ich glaube, Sie haben die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So überprüfen Sie das E-Mail-Adressformat

Tipps zur Verwendung von CSS-Floats

Das obige ist der detaillierte Inhalt vonSo bestimmen Sie die Gleitrichtung des Benutzers in H5-Touch-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css chrome 接口 JS 对象事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tipps zur Verwendung von CSS-FloatsNächster Artikel：Tipps zur Verwendung von CSS-Floats

In Verbindung stehende Artikel

Mehr sehen