Beispiele für die Kapselung von Berührungsereignissen in Javascript-Webentwicklung für mobile Geräte_Javascript-Fähigkeiten-js-Tutorial-php.cn

Beispiele für die Kapselung von Berührungsereignissen in Javascript-Webentwicklung für mobile Geräte_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:46:16

Original

1436 Leute haben es durchsucht

Auf Touchscreen-Geräten erfordern einige grundlegende Gesten eine sekundäre Kapselung von Berührungsereignissen.
zepto ist eine Klassenbibliothek, die häufig auf mobilen Endgeräten verwendet wird. Bei einigen von ihrem Touch-Modul simulierten Ereignissen treten jedoch einige Kompatibilitätsprobleme auf. Beispielsweise weisen Tap-Ereignisse auf einigen Android-Geräten Fehler bei der Ereignispenetration auf, und bei anderen Typen gibt es noch mehr oder weniger Kompatibilitätsprobleme in den Ereignissen.

Also habe ich diese häufig verwendeten Gestenereignisse einfach selbst gekapselt. Da es nicht viele echte Geräte zum Testen gibt, kann es zu Kompatibilitätsproblemen kommen. Der folgende Code gilt nur für iOS 7 und Andorid 4. Der Test besteht in einigen Fällen Browser.

Tap-Ereignis

Das Tippereignis entspricht dem Klickeffekt in PC-Browsern. Bei vielen Geräten kommt es jedoch zu einer gewissen Verzögerung beim Klicken. Click“-Ereignis benötigen Sie. Dies wird mit Hilfe von Touch-Ereignissen erreicht.

Code kopieren Der Code lautet wie folgt:

var startTx, startTy;

element.addEventListener( 'touchstart', function( e){
var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY;
}, false );

element.addEventListener( 'touchend', function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY;

// Auf einigen Geräten sind Berührungsereignisse empfindlicher, was dazu führt, dass sich die Ereigniskoordinaten beim Drücken und Loslassen Ihres Fingers leicht ändern
if( Math.abs(startTx - endTx) < 6 && Math.abs (. startTy - endTy) < 6 ){
console.log( 'fire tap event' );
}
}, false );

doubleTap-Ereignis

Das DoubleTap-Ereignis ist ein Ereignis, das ausgelöst wird, wenn ein Finger innerhalb eines sehr kurzen Zeitraums zweimal innerhalb desselben Positionsbereichs auf den Bildschirm tippt. In einigen Browsern wählt das DoubleTap-Ereignis Text aus. Wenn Sie keinen Text auswählen möchten, können Sie dem Element das CSS-Attribut user-select:none hinzufügen.

Code kopieren Der Code lautet wie folgt:

var isTouchEnd = false,
lastTime = 0,
lastTx = null,
lastTy = null,
firstTouchEnd = true,
body = document.body,
dTapTimer, startTx, startTy, startTime;

element.addEventListener( 'touchstart', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
}

var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY;
}, false );

element.addEventListener( 'touchend', function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
now = Date.now(),
duration = now - lastTime;

// Stellen Sie zunächst sicher, dass ein einzelnes Tap-Ereignis ausgelöst werden kann
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
/ / Das Intervall zwischen zwei Taps muss innerhalb von 500 Millisekunden liegen
if( duration < 301 ){
// Zwischen dieser Tap-Position und der vorherigen Tap-Position ist ein bestimmter Fehlerbereich zulässig
if( lastTx ! == null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) <

firstTouchEnd = true;

lastTx = lastTy = null;
console.log( 'fire double tap event' );
}
}
else{
lastTx = endTx ;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}

lastTime = now;

}, false );

// Wenn Ihr Finger in iOS Safari zu schnell auf den Bildschirm tippt,

// Es besteht eine gewisse Wahrscheinlichkeit, dass die Touchstart- und Touchend-Ereignisse beim zweiten Mal nicht reagieren
// Gleichzeitig Der Finger tippt lange und die Berührung löst keinen Klick aus

if( ~navigator.userAgent.toLowerCase().indexOf('iphone os') ){

body.addEventListener( 'touchstart', function( e ){

startTime = Date.now();
}, true );

body.addEventListener( 'touchend', function( e ){

var noLongTap = Date.now() - startTime < 501;

if( firstTouchEnd ){

firstTouchEnd = false;
if( noLongTap && e.target === element ){
dTapTimer = setTimeout(function(){
firstTouchEnd = true;
lastTx = lastTy = null; }
else{
firstTouchEnd = true ;
}
}, true );

// Unter iOS wird das Klickereignis nicht ausgelöst, wenn der Finger mehrmals zu schnell auf den Bildschirm tippt
element.addEventListener( 'click', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );

dTapTimer = null;

firstTouchEnd = true;
}
}, false );

}

LongTap-Event

Das longTap-Ereignis ist ein Ereignis, das ausgelöst wird, wenn ein Finger längere Zeit ohne Bewegung auf den Bildschirm drückt.

Code kopieren

Der Code lautet wie folgt:

var startTx, startTy, lTapTimer;

element.addEventListener( 'touchstart', function( e){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}

var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY;

lTapTimer = setTimeout(function(){
console.log( 'fire long tap event' );
}, 1000 );

e.preventDefault();
}, false );

element.addEventListener( 'touchmove', function( e ){
var touches = e.touches[0],
endTx = touches.clientX,
endTy = touches.clientY;

if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );

element.addEventListener( 'touchend', function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false ) ;

Swipe事件

Swipe 事件是当手指在屏幕上滑动后触发的事件, 根据手指滑动的方向又分为 swipeLeft (向左)、swipeRight. (向右)、swipeUp (向上)、swipeDown (向下)。

复制代码代码如下:

var isTouchMove, startTx, startTy;

element.addEventListener( 'touchstart', function( e){
var touches = e.touches[0];

startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );

element.addEventListener( 'touchmove', function( e){
isTouchMove = true;
e.preventDefault();
}, false );

element.addEventListener( 'touchend', function( e){
if( !isTouchMove ){
return;
}

var touches = e.changedTouches[0],
    endTx = touches.clientX,
    endTy = touches.clientY,
    distanceX = startTx - endTx
    distanceY = startTy - endTy,
    isSwipe = false;

if( Math.abs(distanceX) >= Math.abs(distanceY) ){
    if( distanceX > 20 ){
      console.log( 'fire swipe left event' );
      isSwipe = true;
    }
    else if( distanceX < -20 ){
      console.log( 'fire swipe right event' );
      isSwipe = true;
    }
}
else{
    if( distanceY > 20 ){
      console.log( 'fire swipe up event' );
      isSwipe = true;
    }
    else if( distanceY < -20 ){
      console.log( 'fire swipe down event' );
      isSwipe = true;
    }
}

if( isSwipe ){
console.log( 'fire swipe event' );
}
}, false );

上面模拟的事件都封装在 MonoEvent