快捷導(dǎo)航

js判斷手機(jī)和pc端選擇不同執(zhí)行事件的方法

更新時(shí)間：2015年01月30日 09:17:45 作者：fonglezen

這篇文章主要介紹了js判斷手機(jī)和pc端選擇不同執(zhí)行事件的方法,可實(shí)現(xiàn)判斷手機(jī)端還是PC端再選擇對(duì)應(yīng)的執(zhí)行事件的功能,是非常實(shí)用的技巧,需要的朋友可以參考下

本文實(shí)例講述了js判斷手機(jī)和pc端選擇不同執(zhí)行事件的方法。分享給大家供大家參考。具體如下：

判斷是否為手機(jī)：

function isMobile(){
 var sUserAgent= navigator.userAgent.toLowerCase(),
 bIsIpad= sUserAgent.match(/ipad/i) == "ipad",
 bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os",
 bIsMidp= sUserAgent.match(/midp/i) == "midp",
 bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
 bIsUc= sUserAgent.match(/ucweb/i) == "ucweb",
 bIsAndroid= sUserAgent.match(/android/i) == "android",
 bIsCE= sUserAgent.match(/windows ce/i) == "windows ce",
 bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile",
 bIsWebview = sUserAgent.match(/webview/i) == "webview";
 return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
}

判斷使用那種事件：

var touchStart,touchMove,touchEnd;
touchStart = isMobile() ? 'touchstart' : 'mousedown';
touchMove = isMobile() ? 'touchmove' : 'mousemove';
touchEnd = isMobile() ? 'touchend' : 'mouseup';

三種事件的相應(yīng)處理：

touchstart:function(e){
 var e=e || window.event; //要判斷使用哪種event
 stopDefault(e);     //不同的瀏覽器，阻止瀏覽器默認(rèn)事件方法不同
 
 if(isMobile()){     //如果是手機(jī)
  var touch=e.touches[0];
  this.y1=touch.pageY
 }else{
  this.y1=e.pageY;   //如果不是手機(jī)
 }
 this.y2=0;
 },
 touchmove:function(e){
 var e=e || window.event;
 stopDefault(e);
 if(isMobile()){
  var touch=e.touches[0];
  this.y2=touch.pageY;
 }else{
  this.y2=e.pageY;
 }
 },

 touchend:function(e){
 var e=e || window.event;
 stopDefault(e);
 if(this.y2==0){
  return;
 }
 var diffY=this.y2-this.y1;
 if(diffY>50){
  this.doNext();
 }else if(diffY<-50){
  this.doPrev();
 }
 this.y1=0,
 this.y2=0;
},

阻止瀏覽器默認(rèn)事件方法：

function stopDefault(e){
  var e=e || window.event;
 if(e.preventDefault){
 e.preventDefault();
 }else{
 e.returnValue=false;
 }
}

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript淡入淡出漸變簡(jiǎn)單實(shí)例
這篇文章主要介紹了JavaScript淡入淡出漸變實(shí)現(xiàn)方法,涉及javascript頁(yè)面元素樣式的漸變操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
原生JavaScript實(shí)現(xiàn)購(gòu)物車效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)購(gòu)物車效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
使用eslint和githooks統(tǒng)一前端風(fēng)格的技巧
這篇文章主要介紹了使用eslint和githooks統(tǒng)一前端風(fēng)格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用詳解
單例是在程序設(shè)計(jì)非?；A(chǔ)的東西，這篇文章主要給大家介紹了關(guān)于利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
解決layui前端框架 form表單,table表等內(nèi)置控件不顯示的問(wèn)題
今天小編就為大家分享一篇解決layui前端框架 form表單,table表等內(nèi)置控件不顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
window.onload綁定多個(gè)事件的兩種解決方案
這篇文章主要介紹了window.onload綁定多個(gè)事件的兩種解決方案的相關(guān)資料,需要的朋友可以參考下
2016-05-05
js中if語(yǔ)句的幾種優(yōu)化代碼寫法
UglifyJS是一個(gè)對(duì)javascript進(jìn)行壓縮和美化的工具，在它的文檔說(shuō)明中，我看到了幾種關(guān)于if語(yǔ)句優(yōu)化的方法。
2011-03-03
簡(jiǎn)單實(shí)現(xiàn)js頁(yè)面切換功能
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)js頁(yè)面切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07
ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能示例
這篇文章主要介紹了ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能,結(jié)合實(shí)例形式分析了ES6中Set數(shù)據(jù)結(jié)構(gòu)的相關(guān)函數(shù)與實(shí)現(xiàn)數(shù)組交集、并集、差集的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
30分鐘快速掌握Bootstrap框架
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。接下來(lái)通過(guò)本文給大家介紹如何快速掌握Bootstrap，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05