移動端基礎事件總結與應用

更新時間：2017年01月12日 16:11:14 作者：彭玉婷

本文主要介紹了移動端基礎事件總結與應用，具有一定的參考價值，下面跟著小編一起來看下吧

1.觸摸事件touch

touchstart 手指放在屏幕上觸發(fā)

touchmove 手指在屏幕上移動，連續(xù)觸發(fā)

touchend 手指離開屏幕觸發(fā)

touchcancel 當系統(tǒng)停止跟蹤時觸發(fā)，該事件暫時用不到

注意：

1.移動端只能事件只能通過監(jiān)聽函數添加，不能用on添加

2.移動端當中就不要用鼠標的事件

3.移動端的事件會觸發(fā)瀏覽器的默認行為，所以在調用事件的時候要把默認行為阻止了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");
//相當于mousedown
box.addEventListener('touchstart',function(ev){
 //console.log(ev.touches);
 this.innerHTML=ev.touches.length;//按下手指數
});

3.設備加速度事件devicemotion

devicemotion 封裝了運動傳感器數據的事件，可以獲取手機運動狀態(tài)下的運動加速度等數據。

其中加速度的數據包含以下三個方向：

x：橫向貫穿手機屏幕；

y：縱向貫穿手機屏幕；

z：垂直手機屏幕

鑒于有些設備沒有排除重力的影響，所以該事件會返回兩個屬性：

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){
 //這個條件成立說明用戶現在已經在大幅度搖晃
 isShake=true;
 }
 if(isShake && range<50){
 //這個條件成立，說明用戶搖晃的幅度很小了就要停了
 box.innerHTML='搖晃了';
 isShake=false;
 }
});

4.設備方向事件deviceorientation

deviceorientation 封裝了方向傳感器數據的事件，可以獲取手機靜止狀態(tài)下的方向數據（手機所處的角度、方位和朝向等）

ev.beta 表示設備在x軸上的旋轉角度，范圍為-180~180。它描述的是設備由前向后旋轉的情況。

ev.gamma 表示設備在y軸上的旋轉角度，范圍為-90~90。它描述的是設備由左向右旋轉的情況。

ev.alpha 表示設備沿z軸上的旋轉角度，范圍為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還引入了一組手勢事件。當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別如下:

gesturestart        當一個手指已經按在屏幕上，而另一個手指又觸摸在屏幕時觸發(fā)
gesturechange   當觸摸屏幕的任何一個手指的位置發(fā)生改變的時候觸發(fā)
gestureend         當任何一個手指從屏幕上面移開時觸發(fā)
ev.rotation          表示手指變化引起的旋轉角度，負值表示逆時針，正值表示順時針，從0開始。
ev.scale              表示兩個手指之間的距離情況，向內收縮會縮短距離，這個值從1開始，并隨距離拉大而增長。

注意：

1. gesture事件目前只有 IOS 2.0以上支持，安卓的暫時沒有支持。

2. 一定要阻止瀏覽器的默認行為。

demo1:多指旋轉

var startDeg=0; //上次旋轉后的角度
//兩個或者兩個以上手指按下
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;//設置最小縮放到0.5
 this.style.transform='scale('+sc+')';
});
//兩個或者兩個以上手指抬起
box.addEventListener('gestureend',function(){
 this.style.background='green';
});

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

詳解JavaScript嚴格模式的使用方法
JavaScript的嚴格模式（Strict?Mode）是一種在代碼中啟用的特殊模式，用于提供更嚴格的語法和錯誤檢查，以改善代碼質量和增強安全性，本文主要介紹JS的嚴格模式的用法，可以幫助大家避免一些常見的錯誤,需要的朋友可以參考下
2023-05-05
javascript函數的節(jié)流[throttle]與防抖[debounce]
這篇文章主要介紹了javascript函數的節(jié)流[throttle]與防抖[debounce ]，詳細的介紹了節(jié)流與防抖的原理和示例，具有一定的參考價值，有興趣的可以了解一下
2017-11-11
JavaScript 異常處理詳解
這篇文章主要介紹了JavaScript 異常處理詳解,需要的朋友可以參考下
2015-02-02
JavaScript 實現自己的安卓手機自動化工具腳本(推薦)
這篇文章主要介紹了 JavaScript 實現自己的安卓手機自動化工具腳本,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-05-05
自定義javascript驗證框架示例【附源碼下載】
這篇文章主要介紹了自定義javascript驗證框架,結合實例形式分析了javascript正則驗證相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2019-05-05
JavaScript中通用的jquery動畫滾屏實例
這篇文章主要介紹了JavaScript中通用的jquery動畫滾屏實例,本文通過實際代碼來詳解實現方法,需要的朋友可以參考一下
2022-07-07
iphone safari不支持position fixed的解決方法
最近一直在做移動web開發(fā)，開發(fā)過程中遇到了許多問題，mobile safari不支持position: fixed就是一件很頭疼的事情
2012-05-05
js自定義Tab選項卡效果
這篇文章主要為大家詳細介紹了js自定義Tab選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
原生JavaScript編寫canvas版的連連看游戲
這篇文章主要為大家詳細介紹了原生JavaScript編寫連連看游戲的實現代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解
這篇文章主要介紹了JavaScript 文件加載與阻塞問題之性能優(yōu)化案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-09-09