<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>無標(biāo)題文檔</title>
<style>
div{width:100px;height:100px;line-height:100px;margin-bottom:10px;background:red;text-align:center;color:#fff;}
</style>
<script>
/***
@name:觸屏事件
@param {string} element dom元素
{function} fn 事件觸發(fā)函數(shù)
***/
var touchEvent={
/*單次觸摸事件*/
tap:function(element,fn){
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;
// 在部分設(shè)備上 touch 事件比較靈敏枝冀，導(dǎo)致按下和松開手指時的事件坐標(biāo)會出現(xiàn)一點點變化
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){
fn();
}
}, false );
},
/*兩次觸摸事件*/
doubleTap:function(element,fn){
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;
// 首先要確保能觸發(fā)單次的 tap 事件
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
// 兩次 tap 的間隔確保在 500 毫秒以內(nèi)
if(duration < 301 ){
// 本次的 tap 位置和上一次的 tap 的位置允許一定范圍內(nèi)的誤差
if( lastTx !== null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) < 45 ){
firstTouchEnd = true;
lastTx = lastTy = null;
fn();
}
}
else{
lastTx = endTx;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}
lastTime = now;
}, false );
// 在 iOS 的 safari 上手指敲擊屏幕的速度過快舀凛，
// 有一定的幾率會導(dǎo)致第二次不會響應(yīng) touchstart 和 touchend 事件
// 同時手指長時間的touch不會觸發(fā)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;
fn();
},400);
}
}
else{
firstTouchEnd = true;
}
}, true );
// iOS 上手指多次敲擊屏幕時的速度過快不會觸發(fā) click 事件
element.addEventListener( 'click', function( e ){
if(dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );
}
},
/*長按事件*/
longTap:function(element,fn){
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(){
fn();
}, 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:function(element,fn){
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)>20||Math.abs(distanceY)>20 ){
fn();
}
}, false );
},
/*向上滑動事件*/
swipeUp:function(element,fn){
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( distanceY > 20 ){
fn();
isSwipe = true;
}
}
}, false );
},
/*向下滑動事件*/
swipeDown:function(element,fn){
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( distanceY < -20 ){
fn();
isSwipe = true;
}
}
}, false );
},
/*向左滑動事件*/
swipeLeft:function(element,fn){
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 ){
fn();
isSwipe = true;
}
}
}, false );
},
/*向右滑動事件*/
swipeRight:function(element,fn){
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 ){
fn();
isSwipe = true;
}
}
}, false );
}
}
</script>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName("div");
touchEvent.tap(aDiv[0],function(){
alert("單次觸摸");
})
touchEvent.doubleTap(aDiv[1],function(){
alert("兩次觸摸");
})
touchEvent.longTap(aDiv[2],function(){
alert("長按");
})
touchEvent.swipe(document,function(){
alert("滑屏了");
})
touchEvent.swipeUp(document,function(){
alert("向上滑屏了");
})
touchEvent.swipeDown(document,function(){
alert("向下滑屏了");
})
touchEvent.swipeLeft(document,function(){
alert("向左滑屏了");
})
touchEvent.swipeRight(document,function(){
alert("向右滑屏了");
})
}
</script>
</head>
<body>
<div class="box1">單次觸摸我</div>
<div class="box2">兩次觸摸</div>
<div class="box3">長按我</div>
<span>試一試在屏幕上任意區(qū)域滑動</span>
</body>
</html>
移動端touch事件
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門期丰，熙熙樓的掌柜王于貴愁眉苦臉地迎上來群叶，“玉大人，你說我怎么就攤上這事钝荡〗至ⅲ” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵埠通，是天一觀的道長赎离。 經(jīng)常有香客問我，道長端辱，這世上最難降的妖魔是什么梁剔？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮舞蔽，結(jié)果婚禮上荣病，老公的妹妹穿的比我還像新娘。我一直安慰自己渗柿，他們只是感情好个盆，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著做祝，像睡著了一般砾省。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上混槐，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼脯厨！你這毒婦竟也來了铅祸？” 一聲冷哼從身側(cè)響起，我...
- 正文 年R本政府宣布荤傲，位于F島的核電站垮耳，受9級特大地震影響颈渊，放射性物質(zhì)發(fā)生泄漏遂黍。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一俊嗽、第九天 我趴在偏房一處隱蔽的房頂上張望雾家。 院中可真熱鬧，春花似錦绍豁、人聲如沸芯咧。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽敬飒。三九已至，卻和暖如春芬位，著一層夾襖步出監(jiān)牢的瞬間无拗，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 1.touch事件以下是四種touch事件 2.touch事件和click事件的區(qū)別 在移動端闪金，手指點擊一個元素，...
- 這兩天自己在寫一個手機網(wǎng)頁论颅，用到了觸屏滑動的特效哎垦，就是往右滑動的時候左側(cè)隱藏的菜單從左邊劃出來喝检。做完之后在手機原生...
- 寫scalajs，習(xí)慣了阻止所有事件的默認(rèn)行為撼泛，在寫輪播圖的時候挠说，給輪播圖的父元素同時加上touch事件和clic...
- 1.touch事件以下是四種touch事件touchstart: //手指放到屏幕上時觸發(fā)touchmov...
- 上周做了一個項目，發(fā)現(xiàn)一個DOM元素觸發(fā)touch事件愿题，竟然還會觸發(fā)別的元素的click事件损俭。 我先描述一下，當(dāng)時...
