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

タッチ スクリーン デバイスでは、一部の基本ジェスチャにはタッチ イベントの二次カプセル化が必要です。
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) 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) / / 2 つのタップ間の間隔は 500 ミリ秒以内でなければなりません
if(duration // このタップ位置と前のタップ位置の間には一定範囲の誤差が許容されます
if( lastTx ! == null &&
Math.abs(lastTx - endTx) Math.abs(lastTy - endTy)

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

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 内にカプセル化されています。