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

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

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

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

}

長押しイベント