Introduction détaillée aux bases des événements mobiles JavaScript et un résumé des bibliothèques d'événements couramment utilisées

Cet article présente principalement en détail les bases des événements mobiles js et des bibliothèques d'événements communes. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

1. Les bases des événements

PC : clic, survol, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, keydown, keyup, chargement, défilement, flou, focus, changement...

Terminal mobile : clic (clic), charger, faire défiler, flouter, mettre au point, modifier, saisir (remplacement de keyup, keydown)... Modèle d'événement TOUCH (gestion des opérations à un seul doigt), modèle d'événement GESTURE (gestion des opérations à plusieurs doigts)

TOUCH : touchstart, touchmove, touchend, touchcancel

GESTURE : gestestart, gestechange, gesteend

1 Clic : du côté mobile, le clic est un événement de clic, pas un événement de clic. dans les projets mobiles, on fait souvent la distinction entre ce que fait un clic et ce que fait un double-clic, ainsi lorsque le navigateur mobile reconnaît un clic, il ne l'exécutera qu'après avoir confirmé qu'il s'agit bien d'un clic :

Sur le mobile côté Il y aura un délai de 300 ms lors de l'utilisation du clic : une fois le premier clic terminé, le navigateur doit attendre 300 ms pour voir si le deuxième clic est déclenché. Si le deuxième clic est déclenché, ce n'est pas un clic, et le deuxième clic. n'est pas déclenché. Il appartient au clic

Le code suivant est le code pour simuler le temps de clic côté mobile

function on(curEle,type,fn){
   curEle.addEventListener(type,fn,false);
  }
  var oBox = document.querySelector('.box');
  //移动端采用click存在300ms延迟
  // oBox.addEventListener('click',function(){
  //  this.style.webkitTransform = 'rotate(360deg)'
  // },false)
  //使用TOUCH事件模型实现点击操作(单击&&双击)
  on(oBox,'touchstart',function(ev){
   //ev:TouchEvent事件 属性 type、target、preventDefault（returnValue）、stopPropagation、changedTouches、touches
   //changedTouches和touches都是手指信息的集合（touchList）,touches获取到值的必要条件只有手指还在屏幕上才可以获取，所以在touchend事件中如果想获取手指离开的瞬间坐标只能使用changedTouches获取
   var point = ev.touches[0];
   this['strX'] = point.clientX;
   this['strY'] = point.clientY;
   this['isMove'] = false;
  })
  on(oBox,'touchmove',function(ev){
   var point = ev.touches[0];
   var newX = point.clientX,
    newY = point.clientY;
   //判断是否发生滑动，我们需要判断偏移的值是否在30PX以内
   if(Math.abs(newX-this['strX'])>30 || Math.abs(newY-this['strY'])>30){
    this['isMove'] = true;
   }
  })
  on(oBox,'touchend',function(ev){
   if(this['isMove'] === false){
    //没有发生移动 点击
    this.style.webkitTransitionDuration = '1s';
    this.style.webkitTransform = 'rotate(360deg)';
    var delayTimer = window.setTimeout(function(){
     this.style.webkitTransitionDuration = '0s';
     this.style.webkitTransform = 'rotate(0deg)';
    }.bind(this),1000);
   }else{
    //滑动
    this.style.background = 'red';
   }
  })

En même temps. temps, vous pouvez également utiliser fastclick.js pour résoudre l'événement de clic côté mobile, délai de 300 ms (adresse github https://github.com/zhouxiaotian/fastclick)

2. Cliquez, cliquez, double-cliquez. , appuyez longuement, faites glisser, faites glisser vers la gauche, faites glisser vers la droite, faites glisser vers le haut, faites glisser vers le bas

Cliquez et double-cliquez (300 MS)

Cliquez et appuyez longuement (750 MS)

Cliquez et faites glisser (que la distance de décalage de l'axe X/Y soit inférieure à 30PX, si elle dépasse 30PX en glissement)

Faites glisser votre doigt vers la gauche et la droite et faites glisser de haut en bas (distance de décalage de l'axe X > distance de décalage de l'axe Y = L'opposé du glissement vers la gauche et la droite est de haut en bas)

Balayez vers la gauche et la droite (décalage Distance> 0 = Balayez vers la droite (l'inverse est balayez vers la gauche)

2. Couramment utilisé bibliothèques d'événements

FastClick.js : résolvez le délai de 300 MS de l'événement CLICK

TOUCH.js : adresse GitHub de la bibliothèque de gestes mobiles Baidu Cloud https://github.com/Clouda-team /touch.code.baidu.com

Les exemples sont les suivants :

var oBox = document.querySelector('.box');
  //单击
  touch.on(oBox,'tap',function(ev){
   this.style.webkitTransitionDuration = '1s';
   this.style.webkitTransform = 'rotate(360deg)';
   var delayTimer = window.setTimeout(function(){
    this.style.webkitTransitionDuration = '0s';
    this.style.webkitTransform = 'rotate(0deg)';
    window.clearTimeout(delayTimer)
   }.bind(this),1000)
  })
  //双击
  touch.on(oBox,'doubletap',function(ev){
   this.style.webkitTransitionDuration = '1s';
   this.style.webkitTransform = 'rotate(-360deg)';
   var delayTimer = window.setTimeout(function(){
    this.style.webkitTransitionDuration = '0s';
    this.style.webkitTransform = 'rotate(0deg)';
    window.clearTimeout(delayTimer)
   }.bind(this),1000)
  })
  //长按
  touch.on(oBox,'hold',function(ev){
   this.style.backgroundColor = 'red';
  })

HAMMER.js

Zepto.js : Connu sous le nom de petit JQ côté mobile, JQ est utilisé côté PC, donc le code contient de nombreuses versions bas de gamme du traitement de compatibilité du navigateur, par exemple, et ZEPTO n'est utilisé que dans le développement mobile, il n'y a donc pas de support pour les versions inférieures d'IE basées sur JQ

JQ fournit de nombreux types de sélecteurs et méthodes de fonctionnement DOM, mais ZEPTO n'implémente que certains sélecteurs et méthodes couramment utilisés. Par exemple : les méthodes d'animation dans JQ incluent animate, hide, show, fadeIn, fadeOut, fadeToggle, slideDown, slideUp, slideToggle... mais dans ZEPTO il n'y a que animate

La taille du code source de ZEPTO est beaucoup plus petit que celui de JQ

　ZEPTO est né spécifiquement pour le développement de terminaux mobiles, il est donc plus adapté aux terminaux mobiles que JQ :

　La méthode d'animation animée de ZEPTO prend en charge le fonctionnement des animations CSS3

　ZEPTO est spécialisé dans Nous avons préparé des opérations événementielles couramment utilisées sur les terminaux mobiles : tap, singleTap, doubleTap, longTap, swipe, swipeUp, swipeDown, swipeLeft, swipeRight

L'exemple de code est le suivant :

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!