在移動開發(fā)中，一種較為容易的做法是，先在桌面上開始原型設(shè)計(jì)，然后再在打算要支持的設(shè)備上處理移動特有的部分。多點(diǎn)觸摸正是難以在PC上進(jìn)行測試的那些功能之一，因?yàn)榇蟛糠值腜C都沒有觸摸輸入。 

不得不在移動設(shè)備上進(jìn)行的測試有可能會拉長你的開發(fā)周期，因?yàn)槟闼龅拿宽?xiàng)改變都需要提交代碼到服務(wù)器上，接著再加載到設(shè)備上。然后，一旦運(yùn)行后，對應(yīng)用也就沒有太多的調(diào)試了，因?yàn)槠桨咫娔X和智能手機(jī)都很缺乏web開發(fā)者所用的工具。

這個問題的一個解決方案是在開發(fā)機(jī)器上模擬觸發(fā)事件。對于單點(diǎn)觸摸，觸摸事件可以基于鼠標(biāo)事件來模擬。如果你有觸摸輸入設(shè)備的話，比如說現(xiàn)代的App MacBook，那么多點(diǎn)觸摸也可以被模擬。 

單點(diǎn)觸摸事件 

如果你想在桌面上模擬單點(diǎn)觸摸事件的話，試一下Phantom Limb，該程序在網(wǎng)頁上模擬觸摸事件并提供一只巨手來引導(dǎo)。
另外還有Touchable這一jQuery插件，該插件跨平臺地統(tǒng)一了觸摸和鼠標(biāo)事件 

多點(diǎn)觸摸事件 

為了能夠讓你的多點(diǎn)觸摸web應(yīng)用在你的瀏覽器或是多點(diǎn)觸摸控板（比如說Apple MacBook或是MagicPad）上起作用，我創(chuàng)建了這一個MagicTouch.js填充工具，其捕捉來自觸控板的觸摸事件，然后把它們轉(zhuǎn)換成標(biāo)準(zhǔn)兼容的觸摸事件。 
1. 下載npTuioClient NPAPI插件并把它安裝到~/Library/Internet Plug-Ins/目錄下。 
2. 下載這一Mac MagicPad的TongSeng TUIO應(yīng)用并啟動這一服務(wù)器。 
3. 下載MagicTouch.js這一javascript庫來基于npTuioClient回調(diào)模擬規(guī)范兼容的觸摸事件。 
4. 以如下方式把magictouch.js腳本和npTuioClient插件包含到你的應(yīng)用中： 

< head>
 
 ...
 
 < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script>
 
< /head>
 
 
 
< body>
 
 ...
 
 < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
 
 Touch input plugin failed to load!
 
 < /object>
 
< /body>

我只在Chrome 10上測試了這一方法，不過只要稍做調(diào)整它應(yīng)該能夠在其他的現(xiàn)代瀏覽器上工作。 

如果你的計(jì)算機(jī)沒有多點(diǎn)觸摸輸入的話，你可以使用其他的TUIO跟蹤器，比如說reacTIVision來模擬觸摸事件。欲了解更多信息，請參閱TUIO項(xiàng)目頁面。 

需要注意的一點(diǎn)是，你的手勢可以是和OS層面的多點(diǎn)觸摸手勢相同的。在OS X上，你可以通過進(jìn)入System Preferences中的Trackpad偏好設(shè)定版面來配置系統(tǒng)范圍的事件。

隨著多點(diǎn)觸摸功能逐漸得到跨移動瀏覽器的的廣泛支持，我非常高興地看到新的web應(yīng)用充分利用了這一豐富的API。

原文來源：html5rocks.com 
原文標(biāo)題：Developing for Multi-Touch Web Browsers

一、手機(jī)上的觸摸事件

基本事件：

touchstart //手指剛接觸屏幕時觸發(fā) 
touchmove //手指在屏幕上移動時觸發(fā) 
touchend //手指從屏幕上移開時觸發(fā)

下面這個比較少用：touchcancel //觸摸過程被系統(tǒng)取消時觸發(fā) 

每個事件都有以下列表，比如touchend的targetTouches當(dāng)然是 0 咯：

touches //位于屏幕上的所有手指的列表
targetTouches //位于該元素上的所有手指的列表
changedTouches //涉及當(dāng)前事件的所有手指的列表 

每個事件有列表，每個列表還有以下屬性：

其中坐標(biāo)常用pageX,pageY： 

pageX //相對于頁面的 X 坐標(biāo) 
pageY //相對于頁面的 Y 坐標(biāo) 
clientX //相對于視區(qū)的 X 坐標(biāo) 
clientY //相對于視區(qū)的 Y 坐標(biāo) 
screenX //相對于屏幕的 X 坐標(biāo) 
screenY //相對于屏幕的 Y 坐標(biāo)
identifier // 當(dāng)前觸摸點(diǎn)的惟一編號 
target //手指所觸摸的 DOM 元素  

其他相關(guān)事件：
event.preventDefault（） //阻止觸摸時瀏覽器的縮放、滾動條滾動 
var supportTouch = "createTouch" in document //判斷是否支持觸摸事件

二、示例

以下是獲取不同類型滑動的代碼具體做法，結(jié)合前人的思想，封裝好了，可以借鑒學(xué)習(xí)：

var touchFunc = function(obj,type,func) { 
 //滑動范圍在5x5內(nèi)則做點(diǎn)擊處理，s是開始，e是結(jié)束 
 var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0}; 
 var sTime = 0, eTime = 0; 
 type = type.toLowerCase();
 
 
 obj.addEventListener("touchstart",function(){ 
  sTime = new Date().getTime(); 
  init.sx = event.targetTouches[0].pageX; 
  init.sy = event.targetTouches[0].pageY; 
  init.ex = init.sx; 
  init.ey = init.sy; 
  if(type.indexOf("start") != -1) func(); 
 }, false);
 
 obj.addEventListener("touchmove",function() { 
  event.preventDefault();//阻止觸摸時瀏覽器的縮放、滾動條滾動 
   init.ex = event.targetTouches[0].pageX; 
  init.ey = event.targetTouches[0].pageY; 
  if(type.indexOf("move")!=-1) func(); 
 }, false);
 
 obj.addEventListener("touchend",function() { 
  var changeX = init.sx - init.ex; 
  var changeY = init.sy - init.ey;
   if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) { 
   //左右事件 
   if(changeX > 0) { 
    if(type.indexOf("left")!=-1) func(); 
   }else{ 
    if(type.indexOf("right")!=-1) func();
 
   } 
  } 
  else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){ 
   //上下事件 
   if(changeY > 0) {
     if(type.indexOf("top")!=-1) func(); 
   }else{ 
    if(type.indexOf("down")!=-1) func(); 
   } 
  }
 
  else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){ 
   eTime = new Date().getTime();
    //點(diǎn)擊事件，此處根據(jù)時間差細(xì)分下 
   if((eTime - sTime) > 300) { 
    if(type.indexOf("long")!=-1) func(); //長按
    }
    else {
     if(type.indexOf("click")!=-1) func(); //當(dāng)點(diǎn)擊處理
    }
   } 
  if(type.indexOf("end")!=-1) func(); 
 }, false); 
}; 

轉(zhuǎn)載的文章：手機(jī)觸摸屏的JS事件

處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件： 

    1.touchstart: // 手指放到屏幕上的時候觸發(fā)  
    2.touchmove: // 手指在屏幕上移動的時候觸發(fā)  
    3.touchend: // 手指從屏幕上拿起的時候觸發(fā)  
    4touchcancel: // 系統(tǒng)取消touch事件的時候觸發(fā)。至于系統(tǒng)什么時候會取消，不詳 

屬性 

    1.client / clientY：// 觸摸點(diǎn)相對于瀏覽器窗口viewport的位置  
    2.pageX / pageY：// 觸摸點(diǎn)相對于頁面的位置  
    3.screenX /screenY：// 觸摸點(diǎn)相對于屏幕的位置  
    4.identifier： // touch對象的unique ID 

//touchstart事件 
 
function touchSatrtFunc(e) { 
 //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 
 var touch = e.touches[0]; //獲取第一個觸點(diǎn) 
 var x = Number(touch.pageX); //頁面觸點(diǎn)X坐標(biāo) 
 var y = Number(touch.pageY); //頁面觸點(diǎn)Y坐標(biāo) 
 //記錄觸點(diǎn)初始位置 
 startX = x; 
 startY = y; 
 
} 
 
//touchmove事件 
function touchMoveFunc(e) { 
 //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 
 var touch = evt.touches[0]; //獲取第一個觸點(diǎn) 
 var x = Number(touch.pageX); //頁面觸點(diǎn)X坐標(biāo) 
 var y = Number(touch.pageY); //頁面觸點(diǎn)Y坐標(biāo) 
 var text = 'TouchMove事件觸發(fā)：（' + x + ', ' + y + '）'; 
 
 //判斷滑動方向 
 
 if (x - startX != 0) { 
 
 //左右滑動 
 
 } 
 
 if (y - startY != 0) { 
 
 //上下滑動 
 
 } 
 
} 

轉(zhuǎn)載的第二篇文章：Mobile Web前端開發(fā)系列: 事件處理（二）

上篇文章我們講了html的基本事件，這篇文章我們著重講解下觸摸事件，觸摸事件觸發(fā)的條件是手指接觸屏幕、手指在屏幕上移動或者從屏幕上離開。 事件是觸摸的集合，它起始于手指初次放置在屏幕上，終止于最后一個手指離開屏幕。事件從開始到結(jié)束過程中的所有觸摸操作都存儲在相同事件的記錄中。 

touch事件 

touch事件可以分為單點(diǎn)觸摸和多點(diǎn)觸摸兩種，單點(diǎn)觸摸高端機(jī)一般都支持，Safari2.0、Android3.0以上的版本支持多點(diǎn)觸摸，支持最多5個手指同時觸摸屏幕，ipad最多支持11個手指同時觸摸屏幕， 我們可以采用以下的事件模型捕獲這些事件： 
ontouchstart ontouchmove ontouchend ontouchcancel 

當(dāng)用戶按下手指在屏幕上，ontouchstart會被觸發(fā)，當(dāng)用戶移動一個或多個手指的時候，ontouchmove會被觸發(fā)，當(dāng)用戶移走手指， ontouchend被觸發(fā)。那什么時候觸發(fā)ontouchcancel呢？當(dāng)一些更高級別的事件發(fā)生的時候，例如，alert，有電話打來或者有 推送的消息提示的時候會取消當(dāng)前的touch操作，即觸發(fā)ontouchcancel。當(dāng)你在開發(fā)一個web game的時候，ontouchcancel 對你很重要，你可以在ontouchcancel觸發(fā)的時候暫停游戲或者保存游戲。 

gesture事件 

gesture事件的運(yùn)行原理與touch事件相同，只是gesture事件僅當(dāng)屏幕上存在至少兩個手指時觸發(fā)，所以Safari2.0、Android3.0以上版本支持， 手勢具備諸多優(yōu)勢，可以幫助我們測量兩指放縮和旋轉(zhuǎn)操作，事件模型如下：
ongesturestart ongesturechange ongestureend 

事件屬性 

無論使用觸摸還是手勢事件，你都需要將這些事件轉(zhuǎn)換為單獨(dú)的觸摸來使用它們。為此，你需要訪問事件對象的一系列的屬性。 

targetTouches 目標(biāo)元素的所有當(dāng)前觸摸 changedTouches 頁面上最新更改的所有觸摸 touches 頁面上的所有觸摸 

changedTouches、targetTouches和touches分別包含稍微不同的觸摸列表。targetTouches和touches分別包含當(dāng)前位于 屏幕上的手指列表，但changedTouches僅列出最后發(fā)生的觸摸。如果你在使用touchend或者gestureend事件，那么這個屬性 非常重要。在這兩種情況下，屏幕上都不會再出現(xiàn)手指，因此targetTouches和touches應(yīng)該為空，但你仍然可以通過查看 changedTouches數(shù)組來了解最后發(fā)生的事情。 

由于觸摸屬性都會生成數(shù)組，因此你可以使用JavaScript數(shù)組函數(shù)來訪問它們。這意味著，event.touches[0]將返回第一次 觸摸，并且可以使用event.touches.length來計(jì)算當(dāng)前存儲的觸摸數(shù)量。 

查看單獨(dú)觸摸時，通過使用event.targetTouches[0],你也可以訪問其它觸摸，每個觸摸會包含一些具體信息， 

clientX、clientY 相對于當(dāng)前屏幕的X或Y位置 pageX、pageY 相對于整體頁面的X或Y位置 screenX、screenY 相對于用戶計(jì)算機(jī)屏幕的X或Y位置 identifier 事件的唯一標(biāo)識符 target 生成觸摸的目標(biāo)對象 

手勢事件的事件對象會比普通觸摸事件多兩個屬性，rotation 手指的旋轉(zhuǎn)角度 scale 放縮的值

轉(zhuǎn)載文章：JavaScript觸摸與手勢事件

iOS版Safari為了向開發(fā)人員傳達(dá)一些特殊信息，新增了一些專有事件。因?yàn)閕OS設(shè)備既沒有鼠標(biāo)也沒有鍵盤，所以在為移動Safari開發(fā)交互網(wǎng)頁時，常規(guī)的鼠標(biāo)和鍵盤事件根本不夠用。隨著Android中的WebKit的加入，很多這樣的專有事件變成了事實(shí)標(biāo)準(zhǔn)。 

1.觸摸事件

包含iOS2.0軟件的iPhone 3G發(fā)布時，也包含了一個新版本的Safari瀏覽器。這款新的移動Safari提供了一些與觸摸(touch)操作相關(guān)的新事件。后來,Android上的瀏覽器也實(shí)現(xiàn)了相同的事件。觸摸事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發(fā)。具體來說，有以下幾個觸摸事件。 

touchstart:當(dāng)手指觸摸屏幕時觸發(fā)；即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)。 
touchmove:當(dāng)手指在屏幕上滑動時連續(xù)的觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()可阻止?jié)L動。 
touchend:當(dāng)手指從屏幕上移開時觸發(fā)。
touchcancel:當(dāng)系統(tǒng)停止跟蹤觸摸時觸發(fā)。關(guān)于此事件的確切觸發(fā)事件，文檔中沒有明確說明。 

上面這幾個事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規(guī)范中定義，但它們卻是以兼容DOM的方式實(shí)現(xiàn)的。因此，每個觸摸事件沒有在DOM規(guī)范中定義，但它們卻是以兼容DOM的方式實(shí)現(xiàn)的。因此，每個觸摸事件的event對象都提供了在鼠標(biāo)事件中常見的屬性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。 

除了常見的DOM屬性外，觸摸事件還包含下列三個用于跟蹤觸摸的屬性。 
touches:表示當(dāng)前跟蹤的觸摸操作的Touch對象的數(shù)組。 
targetTouches:特定于事件目標(biāo)的Touch對象的數(shù)組。 
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。 

每個Touch對象包含下列屬性。 
clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。 
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。 
identifier：表示觸摸的唯一ID。 
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。 
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。 
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。 
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。 
target:觸摸的DOM節(jié)點(diǎn)坐標(biāo)。 

使用這些屬性可以跟蹤用戶對屏幕觸摸操作。來看下面的例子。

 function handleTouchEvent(event) { 
 //只跟蹤一次觸摸 
 if (event.touches.length == 1) { 
 var output = document.getElementById("output"); 
 switch (event.type) { 
 case "touchstart": 
 output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
 break; 
 case "touchend": 
 output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
 break; 
 case "touchmove": 
 event.preventDefault(); //阻止?jié)L動 
 output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; 
 break;
 
 }
 
 }
 
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false); 
document.addEventListener("touchmove", handleTouchEvent, false); 

以上代碼會跟蹤屏幕上發(fā)生的一次觸摸操作。為簡單起見，只會在有一次活動觸摸操作的情況下輸出信息。當(dāng)touchstart事件發(fā)生時。會將觸摸的位置信息輸出到 

元素中。當(dāng)touchmove事件發(fā)生時，會取消其默認(rèn)行為，阻止?jié)L動（觸摸移動的默認(rèn)行為是滾動頁面），然后輸出觸摸操作的變化信息。而touched事件則會輸出有關(guān)觸摸操作的最終信息。注意，在touched事件發(fā)生時，touched集合中就沒有任何Touch對象了，因?yàn)椴淮嬖诨顒拥挠|摸操作;此時，就必須轉(zhuǎn)而使用changeTouchs集合。 

這些事件會在文檔的所有元素上面觸發(fā)，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素時，這些事件發(fā)生的數(shù)序如下： 
touchstart 
mouseover 
mousemove 
mousedown 
mouseup 
click
 touchend 

支持觸摸事件的瀏覽器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG專有OS中的phantom瀏覽器。目前只有IOS版Safari支持多點(diǎn)觸屏。桌面版Firefox 6+和Chrome也支持觸摸事件。 

2.手勢事件 

IOS 2.0中的Safari還引入了一組手勢事件。當(dāng)兩個手指觸摸屏幕時就會產(chǎn)生手勢，手勢通常會改變顯示項(xiàng)的大小，或者旋轉(zhuǎn)顯示項(xiàng)。有三個手勢事件，分別如下。 
gesturestart:當(dāng)一個手指已經(jīng)按在屏幕上面另一個手指有觸摸屏幕時觸發(fā)。 
gesturechange:當(dāng)觸摸屏幕的任何一個手指的位置發(fā)生變化時觸發(fā)。 
gestureend:當(dāng)任何一個手指從屏幕上面移開時觸發(fā)。 

只有兩個手指都觸摸到事件的接收容器時才會觸發(fā)這些事件。在一個元素上設(shè)置事件處理程序，意味著兩個手指必須同時位于該元素的范圍之內(nèi)，才能觸發(fā)手勢事件（這個元素就是目標(biāo)）。由于這些事件冒泡，所以將事件處理程序放在文檔上也可以處理所有手勢事件。此時，事件的目標(biāo)就是兩個手指都位于其范圍內(nèi)的那個元素。 

觸摸事件和手勢事件之間存在某種關(guān)系。當(dāng)一個手指放在屏幕上時，會觸發(fā)touchstart事件。如果另一個手指又放在了屏幕上，則會先觸發(fā)gesturestart事件。如果另一個手指又放在了屏幕上，則會先觸發(fā)gesturestart事件，隨后觸發(fā)基于該手指的touchstart事件。如果一個或兩個手指在屏幕上滑動，將會觸發(fā)gesturechange事件，但只要有一個手指移開，就會觸發(fā)gestureend事件，緊接著又會觸發(fā)基于該手指的touchend事件。 

與觸摸事件一樣，每個手勢事件的event對象都包含著標(biāo)準(zhǔn)的鼠標(biāo)事件屬性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，還包含兩個額外的屬性：rotation和scale。其中,rotation屬性表示手指變化引起的旋轉(zhuǎn)角度，負(fù)值表示逆時針旋轉(zhuǎn)，正值表示順時針旋轉(zhuǎn)（該值從0開始）。而scale屬性表示兩個手指間距的變化情況（例如向內(nèi)收縮會縮短距離）;這個值從1開始，并隨距離拉大而增長，隨距離縮減而減小。 

下面是使用手勢事件的一個示例： 

function handleGestureEvent(event) { 
 var output = document.getElementById("output"); 
 switch(event.type) {
 case "gesturestart": 
 output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")"; 
 break;
 case "gestureend": 
 output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")"; 
 break; 
 case "gesturechange": 
 output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")"; 
 break; 
 } 
}
 
document.addEventListener("gesturestart", handleGestureEvent, false); 
document.addEventListener("gestureend", handleGestureEvent, false); 
document.addEventListener("gesturechange", handleGestureEvent, false); 

與前面演示觸摸事件的例子一樣，這里的代碼只是將每個事件都關(guān)聯(lián)到同一個函數(shù)中，然后通過該函數(shù)輸出每個事件的相關(guān)信息。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論