Detaillierte Einführung in die Grundlagen mobiler JavaScript-Events und eine Zusammenfassung häufig verwendeter Event-Bibliotheken

Dieser Artikel stellt hauptsächlich die Grundlagen von js-Mobile-Events und allgemeinen Event-Bibliotheken im Detail vor. Interessierte Freunde können darauf verweisen

1. Event-Grundlagen

PC: Klicken, Mouseover, Mouseout, MouseEnter, MouseLeave, MouseMove, MouseDown, MouseUp, Mausrad, KeyDown, KeyUp, Laden, Scrollen, Unschärfe, Fokus, Ändern...

Mobiles Endgerät: Klicken (klicken), laden, scrollen, verwischen, fokussieren, ändern, eingeben (ersetzen von Tasten nach oben und unten) ... TOUCH-Ereignismodell (Handhabung von Ein-Finger-Bedienungen), GESTURE-Ereignismodell (Handhabung von Mehrfinger-Bedienungen)

TOUCH: Touchstart, Touchmove, Touchend, Touchcancel

GESTURE: Gestenstart, Gestenwechsel, Gestenende

1. Klicken: Auf der mobilen Seite ist „Click“ ein Klickereignis, kein Klickereignis Bei mobilen Projekten unterscheiden wir oft zwischen der Wirkung eines Klicks und der Wirkung eines Doppelklicks. Wenn der mobile Browser also einen Klick erkennt, führt er ihn erst aus, nachdem er bestätigt hat, dass es sich um einen Klick handelt:

Auf dem Mobilgerät Bei der Verwendung von Click kommt es zu einer Verzögerung von 300 ms: Nachdem der erste Klick abgeschlossen ist, muss der Browser 300 ms warten, um zu sehen, ob der zweite Klick ausgelöst wird wird nicht ausgelöst. Es gehört zum Klicken

Der folgende Code ist der Code zur Simulation der Klickzeit auf der mobilen Seite

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

Gleichzeitig Gleichzeitig können Sie fastclick.js auch verwenden, um das Klickereignis auf der mobilen Seite mit einer Verzögerung von 300 ms zu lösen (Github-Adresse https://github.com/zhouxiaotian/fastclick)

2 , langes Drücken, schieben, nach links schieben, nach rechts schieben, nach oben schieben, nach unten schieben

Klicken und doppelklicken (300 MS)

Klicken und langes Drücken (750 MS)

Klicken und schieben (ob der Versatzabstand der Das Gegenteil von nach links und rechts gleiten ist nach oben und unten.)

Nach links und rechts wischen (Versatz Abstand>0 = Nach rechts wischen (das Gegenteil ist nach links wischen)

2. Wird häufig verwendet Ereignisbibliotheken

FastClick.js: Lösen Sie die 300-MS-Verzögerung des CLICK-Ereignisses

TOUCH.js: GitHub-Adresse der Baidu Cloud Mobile Gesture Library https://github.com/Clouda-team /touch.code.baidu.com

Die Beispiele lauten wie folgt:

HAMMER.js

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

Zepto.js : Auf der mobilen Seite als kleines JQ bekannt, wird JQ auf der PC-Seite verwendet, daher enthält der Code viele Low-End-Versionen, z. B. Browserkompatibilitätsverarbeitung, und ZEPTO wird nur in der mobilen Entwicklung verwendet, daher gibt es keine Unterstützung für niedrigere Versionen von IE basierend auf JQ

JQ bietet viele Selektortypen und DOM-Operationsmethoden, ZEPTO implementiert jedoch nur einige häufig verwendete Selektoren und Methoden. Zum Beispiel: Zu den Animationsmethoden in JQ gehören animate, hide, show, fadeIn, fadeOut, fadeToggle, slideDown, slideUp, slideToggle ... aber in ZEPTO gibt es nur animate

Die Quellcodegröße von ZEPTO ist sehr groß kleiner als die von JQ

　ZEPTO wurde speziell für die Entwicklung mobiler Endgeräte entwickelt und ist daher besser für mobile Endgeräte geeignet als JQ:

　ZEPTOs Animationsmethode unterstützt den Betrieb von CSS3-Animationen

　ZEPTO ist spezialisiert auf Wir haben häufig verwendete Ereignisoperationen auf mobilen Endgeräten vorbereitet: Tap, SingleTap, DoubleTap, LongTap, Swipe, SwipeUp, SwipeDown, SwipeLeft, SwipeRight

Der Beispielcode lautet wie folgt:

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Grundlagen mobiler JavaScript-Events und eine Zusammenfassung häufig verwendeter Event-Bibliotheken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!