On touch screen devices, some relatively basic gestures need to be implemented by secondary encapsulation of touch events.
zepto is a class library with relatively high usage rates on mobile devices, but some events simulated by its touch module have some compatibility problems, such as tap events having event penetration bugs on some Android devices, and other types of events also have more or less compatibility problems.
So, I simply encapsulated these commonly used gesture events by myself. Since there are not many real devices to test, there may be some compatibility issues. The following code is only tested in some more common browsers on iOS 7 and Andorid 4.
tap event
The tap event is equivalent to the click effect in the PC browser. Although the click event is still available on touch screen devices, there will be some delays in click on many devices. If you want to respond quickly to "click" events, you need to use the touch event to achieve it.
The code copy 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, resulting in a little change in the event coordinates when pressing and releasing the 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 that is triggered when the finger taps the screen twice within the same position range and in a very short time. In some browsers, the doubleTap event selects text. If you do not want to select text, you can add the css attribute of user-select:none to the element.
The code copy 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 ){
// Make sure the interval between the two taps is within 500 milliseconds
if( duration < 301 ){
// The position of this tap and the position of the last tap allow errors within a certain range
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 );
// The finger taps the screen too fast on iOS safari.
// There is a certain chance that the touchstart and touchend events will not be responded to the second time
// At the same time, the finger touch will not trigger the 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;
console.log( 'fire double tap event' );
}, 400 );
}
}
else{
firstTouchEnd = true;
}
}, true );
// The click event will not be triggered when the finger taps the screen multiple times on iOS.
element.addEventListener( 'click', function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );
}
longTap event
The longTap event is an event that is triggered when the finger holds the screen for a long time and remains unmoved.
The code copy 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 event
The swipe event is an event triggered when the finger slides on the screen. It is divided into swipeLeft (left), swipeRight (right), swipeUp (up), and swipeDown (down).
The code copy is as follows:
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 );
All the events simulated above are encapsulated in MonoEvent. The complete code address: https://github.com/chenmnkken/monoevent, friends who need it, please take a look~
PS: Here I recommend an online query tool about JS events, which summarizes the commonly used event types and function functions of JS:
A complete list of javascript events and functions:
http://tools.VeVB.COM/table/javascript_event