JavaScript モバイルデバイスのタッチイベントのカプセル化の例 Web 開発

JavaScript モバイルデバイスのタッチイベントのカプセル化の例 Web 開発_JavaScript スキル

WBOY

リリース： 2016-05-16 16:46:16

オリジナル

1431 人が閲覧しました

タッチスクリーンデバイスでは、一部の基本ジェスチャにはタッチイベントの二次カプセル化が必要です。
zepto はモバイル端末でよく使用されるクラスライブラリですが、そのタッチモジュールによってシミュレートされる一部のイベントには互換性の問題がいくつかあります。たとえば、タップイベントには一部の Android デバイスでイベント侵入バグがあり、その他のタイプにも多かれ少なかれ問題があります。イベントにおける互換性の問題。

そこで、これらの一般的に使用されるジェスチャイベントを自分でカプセル化しました。テストする実際のデバイスが少ないため、互換性の問題がいくつかある可能性があります。次のコードは iOS 7 と Andorid 4 のみに適用されます。テストはいくつかの共通でパスします。ブラウザ。

イベントをタップ

タップイベントは PC ブラウザのクリック効果と同等ですが、クリックイベントはタッチスクリーンデバイスでも利用できますが、多くのデバイスではクリックに多少の遅れが生じます。 click" イベントが必要です。これは、タッチイベントの助けを借りて実現されます。

コードをコピーしますコードは次のとおりです:

var startTx, startTy;

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

startTx = touchs.clientX;
startTy = touch.clientY;
}, false );

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

// 一部のデバイスでは、タッチイベントの感度が高く、指を押したり離したりするとイベント座標がわずかに変化します。
if( Math.abs(startTx - endTx) < 6 && Math.abs ( startTy - endTy) < 6 ){
console.log( 'タップイベントを起動' );
}
}, false );

ダブルタップイベント

doubleTap イベントは、指が同じ位置範囲内で非常に短い時間内に画面を 2 回タップしたときにトリガーされるイベントです。一部のブラウザでは、doubleTap イベントによってテキストが選択されます。テキストを選択したくない場合は、要素に user-select:none CSS 属性を追加できます。

コードをコピーコードは次のとおりです:

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 touch = e.touches[0];

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

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

// まずシングルタップイベントがトリガーできることを確認します
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
/ / 2 つのタップ間の間隔は 500 ミリ秒以内でなければなりません
if(duration <301 ){
// このタップ位置と前のタップ位置の間には一定範囲の誤差が許容されます
if( lastTx ! == null &&
Math.abs(lastTx - endTx) <45 &&
Math.abs(lastTy - endTy) <45 ){

firstTouchEnd = true;
lastTx = lastTy = null;
console.log( 'ダブルタップイベントの発生' );
}
}
else{
lastTx = endTx ;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}

lastTime = now;
}, false );

// iOS Safari では、指で画面をタップする速度が速すぎると、
// touchstart イベントと touchend イベントが 2 回目に応答しない可能性があります
// 同時に、指で長時間タップしてもクリックがトリガーされない

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

// iOS では、指で画面を複数回タップする速度が速すぎる場合、クリックイベントはトリガーされません
element.addEventListener( 'click', function( e ){
if( dTapTimer ){

clearTimeout( dTapTimer );

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

}

長押しイベント

longTap イベントは、指を動かさずに画面を長押しするとトリガーされるイベントです。

コードをコピー

コードは次のとおりです:

var startTx、startTy、lTapTimer;

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

var touch = e.touches[0];

startTx = touchs.clientX;
startTy = touch.clientY;

lTapTimer = setTimeout(function(){
console.log( 'ロングタップイベントの発生' );
}, 1000 );

e.preventDefault();
}, false );

element.addEventListener( 'touchmove', function( e ){
var touch = e.touches[0],
endTx = touchs.clientX,
endTy = touchs.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 イベントは、画面上で手をスライドさせた後に起動されるイベントで、手のスライドの方向に応じて、swipeLeft (左方向)、swipeRight (方向右)、swipeUp (上方向)、swipeDown (方向下) に分類されます。 >

复制代代码如下:

var isTouchMove, startTx, startTy;
element.addEventListener( 'touchstart', function( e ){

var touch = e.touches[0];

startTx = touchs.clientX;

startTy = touchs.clientY;
isTouchMove = false;
}, false );

element.addEventListener( 'touchmove', function( e ){

isTouchMove = true;
e.preventDefault();
}, false );

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

if( !isTouchMove ){
return;
}

var touch = e.changedTouches[0],

endTx = touchs.clientX,
endTy = touchs.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;

if( Math.abs(距離X) >= Math.abs(距離Y) ){

if( 距離X > 20 ){
console.log( '左スワイプイベントを起動' );
isSwipe = true;
}
else if( distanceX console.log( '右スワイプイベントを起動' );
isSwipe = true;
}
}
else{
if( distanceY > 20 ){
console.log( 'fire swipe event' );
isSwipe = true;
}
else if( distanceY console.log( '下へのスワイプイベントの発生' );
isSwipe = true;
}
}

if( isSwipe ){

console.log( 'fire スワイプイベント' );
}
}, false );

上のモデルのイベントはすべて MonoEvent 内にカプセル化されています。