Examples of encapsulation of touch events in javascript mobile device web development

Examples of encapsulation of touch events in javascript mobile device web development_javascript skills

WBOY

Release： 2016-05-16 16:46:16

Original

1430 people have browsed it

On touch screen devices, some basic gestures require secondary encapsulation of touch events.
zepto is a highly used class library on mobile terminals, but some events simulated by its touch module have some compatibility issues. For example, tap events have event penetration bugs on some Android devices, and other types There are also more or less compatibility issues in the events.

So, I simply encapsulated these commonly used gesture events myself. Since there are not many real devices to test, there may be some compatibility issues. The following code is only for iOS 7 and Andorid 4. The test passes in some common browsers.

tap event

The tap event is equivalent to the click effect in PC browsers. Although the click event is still available on touch screen devices, on many devices, there will be some delay in the click. If you want a quick response to the "click" event, you need This is achieved with the help of touch events.

Copy code The code is as follows:

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;

// On some devices, touch events are more sensitive, causing the event coordinates to change slightly when pressing and releasing your finger.
if( Math.abs(startTx - endTx) < 6 && Math.abs (startTy - endTy) < 6 ){
console.log( 'fire tap event' );
}
}, false );

doubleTap event

The doubleTap event is an event triggered when a finger taps the screen twice within the same position range and within a very short period of time. In some browsers, the doubleTap event will select text. If you do not want to select text, you can add the user-select:none css attribute to the element.

Copy code The code is as follows:

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;

// First make sure that a single tap event can be triggered
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
// The interval between two taps must be within 500 milliseconds
if( duration < 301 ){
// A certain range of error is allowed between this tap position and the previous tap position
if( lastTx !== null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) < 45 ){

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

// On iOS Safari, if your finger taps the screen too fast,
// there is a certain chance that the touchstart and touchend events will not respond the second time
// At the same time, the finger taps for a long time touch does not trigger click

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

// On iOS, the click event will not be triggered when the finger taps the screen multiple times too fast
element.addEventListener( 'click', function( e ){
if( dTapTimer ){

clearTimeout( dTapTimer );

dTapTimer = null;
firstTouchEnd = true;
}
}, false );

}

longTap event

The longTap event is an event triggered when a finger presses the screen for a long time without moving.

Copy code

The code is as follows:

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