Maison >interface Web >Tutoriel H5 >Implémentation d'un événement tactile HTML5 pour déterminer la direction du glissement

Implémentation d'un événement tactile HTML5 pour déterminer la direction du glissement

不言original: 2018-06-05 16:45:562506parcourir

Cet article présente principalement les informations pertinentes sur la mise en œuvre des événements tactiles html5 pour déterminer la direction du glissement. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

Afin de fournir une prise en charge solide des interfaces tactiles, les événements tactiles offrent la possibilité de répondre aux opérations de l'utilisateur sur l'écran tactile ou le pavé tactile.

Interface

TouchEvent

TouchEvent est un type d'événement qui décrit les changements d'état des doigts sur le plan 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;
  }

Méthodes JS natives

En plus des nouvelles méthodes en H5 , Vous pouvez également utiliser du JS natif pour déterminer la direction de glissement de la vue. Le code est le suivant (peut être exécuté directement) :

Il convient de noter que le document.body.scrollTop de Chrome est toujours 0 et a besoin. à remplacer 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(&#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>

Recommandations associées :

L'attribut de téléchargement obligatoire télécharger en HTML5 utilise

Résumé des méthodes d'alignement du texte dans HTML5 Canvas

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple d'implémentation d'un histogramme dans un graphique en toile en HTML5Article suivant：Exemple d'implémentation d'un histogramme dans un graphique en toile en HTML5

Articles Liés

Voir plus