Comment déterminer la direction de glissement de l'utilisateur dans les événements tactiles H5-tutoriel CSS-php.cn

Comment déterminer la direction de glissement de l'utilisateur dans les événements tactiles H5

php中世界最好的语言

Libérer： 2018-06-13 14:37:04

original

3415 Les gens l'ont consulté

Cette fois, je vais vous montrer comment déterminer la direction de glissement de l'utilisateur dans les événements tactiles H5. Quelles sont les précautions pour déterminer la direction de glissement de l'utilisateur dans les événements tactiles H5 ? Voici un cas pratique, jetons un oeil.

Interface

TouchEvent

TouchEvent est un type qui décrit le mouvement d'un doigt sur les événements de changement d'état d'une surface tactile (écran tactile, pavé tactile, etc.). Ce type d'événement est utilisé pour décrire un ou plusieurs points de contact, permettant aux développeurs de détecter le mouvement des points de contact, l'augmentation et la diminution des points de contact, etc. Chaque objet Touch représente un point tactile ; chaque point tactile est décrit par sa position, sa taille, sa forme, son niveau de pression et son élément cible. L'objet TouchList représente une liste de plusieurs points de contact.

Types d'événements tactiles

Afin de distinguer les changements d'état liés au toucher, il Il existe de nombreux types d'événements tactiles. Vous pouvez déterminer le type de l'événement en cours en vérifiant la propriété TouchEvent.type de l'événement tactile

touchstart : se déclenche lorsque l'utilisateur place un point tactile sur la surface tactile.
touchend : Déclenché lorsqu'un point tactile est retiré de la surface tactile par l'utilisateur (lorsque l'utilisateur lève un doigt de la surface tactile).
touchmove : Déclenché lorsque l'utilisateur déplace un point tactile sur le plan tactile.
touchcancel : Déclenché lorsque le contact est interrompu pour une raison quelconque.

Déterminer le sens de glissement

Le principe de base est d'enregistrer les coordonnées du début du glissement (touchStart) et la position de fin de glissement (touchEnd), puis effectuez des calculs de position relative.

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

Copier après la connexion

Méthode JS native

En plus des nouvelles méthodes de H5, vous pouvez également utiliser du JS natif pour déterminer la direction de glissement de la vue, code comme suit (peut être exécuté directement) :

Il convient de noter que le document.body.scrollTop de Chrome est toujours 0 et doit être remplacé par 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('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>

Copier après la connexion

Je crois avoir lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment vérifier le format de l'adresse e-mail

Conseils d'utilisation des flottants CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!