Heim > Artikel > Web-Frontend > Implementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung

Implementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung

不言Original: 2018-06-05 16:45:562430Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung von HTML5-Touch-Ereignissen zur Bestimmung der Gleitrichtung vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden.

Um eine starke Unterstützung für Touch-Schnittstellen zu bieten, bieten Touch-Ereignisse die Möglichkeit, auf Benutzeroperationen auf dem Touchscreen oder Touchpad zu reagieren.

Schnittstelle

TouchEvent

TouchEvent ist eine Art Ereignis, das die Zustandsänderungen von Fingern auf der Touch-Ebene (Touchscreen, Touchpad usw.) beschreibt .). 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.

Arten 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, Sie Sie können auch natives JS verwenden, um die Gleitrichtung der Ansicht zu bestimmen. Der Code lautet wie folgt (kann direkt ausgeführt werden):

Es ist zu beachten, dass document.body.scrollTop von Chrome immer 0 ist und sein muss geändert zu 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>

Verwandte Empfehlungen:

Das obligatorische Download-Attribut „Download“ in HTML5 verwendet

Zusammenfassung der Methoden zur Textausrichtung in HTML5 Canvas

Das obige ist der detaillierte Inhalt vonImplementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Beispiel für die Implementierung eines Histogramms in einem Canvas-Diagramm in HTML5Nächster Artikel：Beispiel für die Implementierung eines Histogramms in einem Canvas-Diagramm in HTML5

In Verbindung stehende Artikel

Mehr sehen