1.觸摸事件touch
touchstart 手指放在屏幕上觸發(fā)
touchmove 手指在屏幕上移動，連續(xù)觸發(fā)
touchend 手指離開屏幕觸發(fā)
touchcancel 當系統(tǒng)停止跟蹤時觸發(fā)，該事件暫時用不到
注意：
1.移動端只能事件只能通過監(jiān)聽函數(shù)添加，不能用on添加
2.移動端當中就不要用鼠標的事件
3.移動端的事件會觸發(fā)瀏覽器的默認行為，所以在調(diào)用事件的時候要把默認行為阻止了ev.preventDefault。
demo:
document.addEventListener('touchstart',function(ev){ ev.preventDefault();});var box=document.getElementById("box");box.addEventListener('touchstart',function(){ this.innerHTML='手指按下了';});box.addEventListener('touchmove',function(){ this.innerHTML='手指移動了';});box.addEventListener('touchend',function(){ this.innerHTML='手指離開了';});2.touch事件對象
ev.touches 當前屏幕的手指列表
ev.targetTouches 當前元素上的手指列表
ev.changedTouches 觸發(fā)當前事件的手指列表
每個touch對象都包含了以下幾個屬性（打印ev.touches如下）：
clientX //觸摸目標在視口中的X坐標。
clientY //觸摸目標在視口中的Y坐標。
Identifier //標示觸摸的唯一ID。
pageX //觸摸目標在頁面中的X坐標。
pageY //觸摸目標在頁面中的Y坐標。
screenX//觸摸目標在屏幕中的X坐標。
screenY //觸摸目標在屏幕中的Y坐標。
target // 觸摸的DOM節(jié)點目標。
demo:
var box=document.getElementById("box");//相當于mousedownbox.addEventListener('touchstart',function(ev){ //console.log(ev.touches); this.innerHTML=ev.touches.length;//按下手指數(shù)});3.設(shè)備加速度事件devicemotion
devicemotion 封裝了運動傳感器數(shù)據(jù)的事件，可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。
其中加速度的數(shù)據(jù)包含以下三個方向：
x：橫向貫穿手機屏幕；
y：縱向貫穿手機屏幕；
z：垂直手機屏幕
鑒于有些設(shè)備沒有排除重力的影響，所以該事件會返回兩個屬性：
1、accelerationIncludingGravity(含重力的加速度)
2、acceleration(排除重力影響的加速度)
注意：這個事件只能放在window身上
demo1:顯示重力加速度的值
window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; box.innerHTML='x:'+motion.x+'<br/>'+'y:'+motion.y+'<br/>'+'z:'+motion.z;});demo2:方塊跟著重力左右移動
window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; var x=parseFloat(getComputedStyle(box).left);//box目前的left值 box.style.left=x+motion.x+'px';});demo3:搖一搖應用原理
var box=document.getElementById('box');var lastRange=0; //上一次搖晃的幅度var isShake=false; //決定用戶到底有沒有大幅度搖晃window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; var x=Math.abs(motion.x); var y=Math.abs(motion.y); var z=Math.abs(motion.z); var range=x+y+z; //當前搖晃的幅度 if(range-lastRange>100){ //這個條件成立說明用戶現(xiàn)在已經(jīng)在大幅度搖晃 isShake=true; } if(isShake && range<50){ //這個條件成立，說明用戶搖晃的幅度很小了就要停了 box.innerHTML='搖晃了'; isShake=false; }});4.設(shè)備方向事件deviceorientation
deviceorientation 封裝了方向傳感器數(shù)據(jù)的事件，可以獲取手機靜止狀態(tài)下的方向數(shù)據(jù)（手機所處的角度、方位和朝向等）
ev.beta 表示設(shè)備在x軸上的旋轉(zhuǎn)角度，范圍為-180~180。它描述的是設(shè)備由前向后旋轉(zhuǎn)的情況。
ev.gamma 表示設(shè)備在y軸上的旋轉(zhuǎn)角度，范圍為-90~90。它描述的是設(shè)備由左向右旋轉(zhuǎn)的情況。
ev.alpha 表示設(shè)備沿z軸上的旋轉(zhuǎn)角度，范圍為0~360。
注意：這個事件只能放在window身上
demo:
window.addEventListener('deviceorientation',function(ev){ box.innerHTML='x軸傾斜:'+ev.beta.toFixed(1)+'</br>y軸傾斜:'+ev.gamma.toFixed(1)+'</br>z軸傾斜:'+ev.alpha.toFixed(1);});5.手勢事件gesture
IOS的Safari還引入了一組手勢事件。當兩個手指觸摸屏幕時就會產(chǎn)生手勢，手勢通常會改變顯示項的大小，或者旋轉(zhuǎn)顯示項。有三個手勢事件，分別如下:
gesturestart 當一個手指已經(jīng)按在屏幕上，而另一個手指又觸摸在屏幕時觸發(fā)
gesturechange 當觸摸屏幕的任何一個手指的位置發(fā)生改變的時候觸發(fā)
gestureend 當任何一個手指從屏幕上面移開時觸發(fā)
ev.rotation 表示手指變化引起的旋轉(zhuǎn)角度，負值表示逆時針，正值表示順時針，從0開始。
ev.scale 表示兩個手指之間的距離情況，向內(nèi)收縮會縮短距離，這個值從1開始，并隨距離拉大而增長。
注意：
1. gesture事件目前只有 IOS 2.0以上支持，安卓的暫時沒有支持。
2. 一定要阻止瀏覽器的默認行為。
demo1:多指旋轉(zhuǎn)
var startDeg=0; //上次旋轉(zhuǎn)后的角度//兩個或者兩個以上手指按下box.addEventListener('gesturestart',function(){ this.style.background='blue'; //rotate(90deg) if(this.style.transform){ startDeg=parseFloat(this.style.transform.split('(')[1]); }});//兩個或者兩個以上手指變換box.addEventListener('gesturechange',function(ev){ /*this.style.background='black'; this.innerHTML=ev.rotation;*/ this.style.transform='rotate('+(ev.rotation+startDeg)+'deg)';});//兩個或者兩個以上手指抬起box.addEventListener('gestureend',function(){ this.style.background='green';});demo2:多指縮放
document.addEventListener('touchstart',function(ev){ ev.preventDefault();});document.addEventListener('touchmove',function(ev){ ev.preventDefault();});var box=document.getElementById("box");var startScale=1; //上次縮放后的角度//兩個或者兩個以上手指按下box.addEventListener('gesturestart',function(){ this.style.background='blue'; //rotate(90deg) if(this.style.transform){ startScale=parseFloat(this.style.transform.split('(')[1]); }});//兩個或者兩個以上手指變換box.addEventListener('gesturechange',function(ev){ /*this.style.background='black'; this.innerHTML=ev.rotation;*/ var sc=ev.scale*startScale; sc=sc<0.5?0.5:sc;//設(shè)置最小縮放到0.5 this.style.transform='scale('+sc+')';});//兩個或者兩個以上手指抬起box.addEventListener('gestureend',function(){ this.style.background='green';});以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
