Implementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung-H5-Tutorial-php.cn

Implementierung eines HTML5-Touch-Ereignisses zur Bestimmung der Gleitrichtung

不言

Freigeben： 2018-06-05 16:45:56

Original

2443 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!