Exemples d'encapsulation d'événements tactiles dans les compétences de développement Web javascript pour appareils mobiles

Exemples d'encapsulation d'événements tactiles dans les compétences de développement Web javascript pour appareils mobiles_javascript

WBOY

Libérer： 2016-05-16 16:46:16

original

1440 Les gens l'ont consulté

Sur les appareils à écran tactile, certains gestes de base nécessitent une encapsulation secondaire des événements tactiles.
zepto est une bibliothèque de classes très utilisée sur les terminaux mobiles, mais certains événements simulés par son module tactile présentent des problèmes de compatibilité. Par exemple, les événements Tap ont des bugs de pénétration d'événements sur certains appareils Android, et d'autres types encore. ou moins de problèmes de compatibilité dans les événements.

J'ai donc simplement encapsulé moi-même ces événements gestuels couramment utilisés. Comme il n'y a pas beaucoup d'appareils réels à tester, il peut y avoir des problèmes de compatibilité. Le code suivant concerne uniquement iOS 7 et Andorid 4. Le test réussit dans certains cas courants. navigateurs.

événement de claquettes

L'événement Tap est équivalent à l'effet de clic dans les navigateurs PC. Bien que l'événement Click soit toujours disponible sur les appareils à écran tactile, sur de nombreux appareils, il y aura un certain retard dans le clic si vous souhaitez une réponse rapide au ". click" dont vous avez besoin. Ceci est réalisé à l'aide d'événements tactiles.

Copier le code Le code est le suivant :

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;

// Sur certains appareils, les événements tactiles sont plus sensibles, ce qui entraîne une légère modification des coordonnées de l'événement lorsque vous appuyez et relâchez votre doigt
if( Math.abs(startTx - endTx) < 6 && Math.abs (. startTy - endTy) < 6 ){
console.log( 'fire tap event' );
}
}, false );

événement doubleTap

L'événement doubleTap est un événement déclenché lorsqu'un doigt tape deux fois sur l'écran dans la même plage de positions et dans un laps de temps très court. Dans certains navigateurs, l'événement doubleTap sélectionnera du texte. Si vous ne souhaitez pas sélectionner de texte, vous pouvez ajouter l'attribut css user-select:none à l'élément.

Copier le code Le code est le suivant :

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,
maintenant = Date.now(),
durée = maintenant - lastTime;

// Assurez-vous d'abord qu'un événement de simple pression peut être déclenché
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
/ / L'intervalle entre deux pressions doit être inférieur à 500 millisecondes
if( durée < 301 ){
// Une certaine plage d'erreur est autorisée entre cette position de prise et la position de prise précédente
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;
jpg
lastTime = maintenant;
}, false );

// Sur iOS Safari, si votre doigt tape trop vite sur l'écran,
// Il y a une certaine chance que les événements touchstart et touchend ne répondent pas une deuxième fois
// En même temps, le doigt tape pendant une longue période le toucher ne déclenche pas le clic

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

// Sur iOS, l'événement click ne sera pas déclenché lorsque le doigt tape plusieurs fois trop vite sur l'écran
element.addEventListener( 'click', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );

}

événement longTap

L'événement longTap est un événement déclenché lorsqu'un doigt appuie longuement sur l'écran sans bouger.

Copier le code

Le code est le suivant :

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;
}
}, faux );

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

glisser 事件

glisser vers la gauche (vers la gauche)、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 中了。完整代码地址：https://github.com/chenmnkken/monoevent，需要的朋友看看吧~