項目中須要用到手機拖動事務(wù)，但對于pc瀏覽器的mousedown、mou搜刮引擎優(yōu)化ver和mouseup手機支撐沒有pc好，所有搜了一篇關(guān)于iphone上的觸摸和手勢來進修進修。

以下為原文：

我先來說說iPhone的把握臺，因為我發(fā)明它在測試時是很是首要的。在Settings-Safari-Developer下，你可以把它打開或 封閉。它供給了一些簡單的信息，包含錯誤、警告等。

當(dāng)我瀏覽這份[Apple Developer Connection page]文檔之后，固然它寫的很活潑和完全，但仍 然給我留下了一些細(xì)節(jié)上的困惑。并且，若是你不是ADC（Apple開辟者中間）的會員，看這個文檔可能會讓你更含混。

清理思路

Apple給API加了兩個新設(shè)法：觸摸（touch）和手勢（gesture）。觸摸用來記錄你有幾許手指放在屏幕上、它們都在哪里、它們在做什 么操縱以及它們的軌跡。手勢來檢測你在用兩個手指做什么，是否在捏（pinching）、推（pushing）、或是在扭轉(zhuǎn)（rotating）。

觸摸

當(dāng)你把一根手指頭放在屏幕上時，觸摸（touch）事務(wù)便被觸發(fā)了。每當(dāng)一根新的手指放在屏幕上，就會觸發(fā)一個新的touchstart事務(wù)。而當(dāng) 手指抬起分開屏幕，touchend事務(wù)便被觸發(fā)了。若是在手指接觸屏幕后，你又挪動了這根手指，那么觸發(fā)的是touchmove事務(wù)。

有以下touch事務(wù)：

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

touchend: 手指分開屏幕時觸發(fā)

touchmove: 手指在屏幕上移動時觸發(fā)

touchcancel: 體系可以作廢touch事務(wù)，但我不斷定它如何才干觸發(fā)。我想可能是當(dāng)你拖放時，接到一個類似短信或者其它事務(wù)時，才會觸發(fā)。但我沒有測試成功過。

node.ontouchstart = function（evt）{
 console.log（evt.pageX + "/" + evt.pageY）;
 // 哦不! 值都是空的，必然有BUG
}

我的第一個錯誤，產(chǎn)生在監(jiān)聽這些事務(wù)并試著獲得這些事務(wù)的坐標(biāo)（pageX， pageY等）時。在再一次看了ADC的文檔后，我懂得了這三個事務(wù)依附于對象。但我不克不及十分?jǐn)喽ǎ晕胰y試、記錄、實驗。

它幫助我解決了Apple開辟者們一向感覺棘手的題目。在應(yīng)用鼠標(biāo)時，你實際上只產(chǎn)生一個點：經(jīng)由過程鼠標(biāo)指針。當(dāng)你用手時，你可以用兩個手指，當(dāng)你擊 打（tap）屏幕右側(cè)時，另一只手指可以放在屏幕左側(cè)。

我們的事務(wù)對象有一個列表，這個列表包含了每個接觸屏幕的手指所產(chǎn)生的信息。它還包含了另兩個列表，一個只包含來自雷同節(jié)點的手指信息，另一個只包 含與當(dāng)前事務(wù)相干的手指信息。每一個touch事務(wù)都邑激活這些列表。

下面就是這個列表：

touches: 每個接觸屏幕的手指所產(chǎn)生的信息

targetTouches: 和touches類似，但它過濾出只來自雷同節(jié)點的手指信息

changedTouches: 只包含與當(dāng)前事務(wù)相干的每個手指信息（見下文）

要更好地懂得這些列表，讓我們來快速瀏覽一些例子吧：

當(dāng)我把一根手指放在屏幕上，3個列表都是雷同的信息。它會在changedTouches中，因為手指放上去就會觸發(fā)這個事務(wù)。

當(dāng)我放上第二根手指，touches會變?yōu)閮身棧恳桓种付加幸豁棥Ｖ划?dāng)?shù)诙种阜旁诘谝桓种傅攸c節(jié)點上時，targetTouches才 會變成兩 個項。changedTouches的信息和第二根手指有關(guān)，因為它觸發(fā)了事務(wù)。

當(dāng)我剛巧在同一時刻放上兩根手指時，changedTouches才可能會有兩個項目，每根手指一個。

若是我移下手指，獨一會改變的列表是changedTouches并且會包含多個移下手指的信息（起碼有一個）。

當(dāng)我抬起一根手指，它會從touches、targetTouches中移除，同時它會呈如今changedTouches中，因為它又觸發(fā)了這 個事務(wù)。

移除最后一根手指，會清空touches和targetTouches，changedTouches會包含最后一根手指的信息。

有了這個列表，我可以對用戶的操縱對峙親近的監(jiān)控。想象一下，用JavaScript發(fā)明（另）一個Super Mario的克隆版本。我可以告訴用戶，他（她）的拇指在一個什么標(biāo)的目標(biāo)上，同時也可以監(jiān)控用戶的跳躍或發(fā)射****彈。

正如我之前所說，這些列表包含了手指觸摸屏幕時的信息。這些對象都很是類似，就像你凡是看到的那樣，在一個事務(wù)對象轉(zhuǎn)到一個事務(wù)處理懲罰器時，一組有限 的屬性可以用在這些對象上。下面是這些對象上屬性的完全列表：

clientX: touch事務(wù)相對于視圖（viewport）的X軸坐標(biāo)（不包含遷移轉(zhuǎn)變位移）

clientY: touch事務(wù)相對于視圖（viewport）的Y軸坐標(biāo)（不包含遷移轉(zhuǎn)變位移）

screenX: 相對于屏幕

screenY: 相對于屏幕

pageX: 相對于全部頁面（包含遷移轉(zhuǎn)變）

pageY: 相對于全部頁面（包含遷移轉(zhuǎn)變）

target: touch事務(wù)所產(chǎn)生的節(jié)點

identifier: 一個id號，為每一個touch事務(wù)供給獨一標(biāo)識

對于桌面Web設(shè)計而言，在一個常規(guī)的mousemove事務(wù)中，進入節(jié)點的target屬性凡是是鼠標(biāo)當(dāng)前懸停的屬性。然則在所有的iPhone Touch事務(wù)中，target則是參照于源節(jié)點。

開辟iPhone Web App的懊惱之一就是，即使你為你的App設(shè)置好了視圖區(qū)域（viewport），拖下手指時仍會讓頁面移動。榮幸的是，touchmove的事務(wù)對象提 供了[preventDefault（）]函數(shù)（一個標(biāo)準(zhǔn)的DOM事務(wù)函數(shù)），經(jīng)由過程這個辦法，在你用手指拖動時，可以 讓頁面對峙絕對靜止。

用Touch API來實現(xiàn)拖放

我們不必像愁悶mousemove那樣費神跟蹤down/up事務(wù)，因為touchmove僅在touchstart后才會觸發(fā)。

node.ontouchmove = function（e）{
 if（e.touches.length == 1）{ // 僅處理懲罰一根手指
 var touch = e.touches[0]; // 獲取＃1號手指的信息
 var node = touch.target; // 尋找拖攤開端時的節(jié)點
 node.style.position = "absolute";
 node.style.left = touch.pageX + "px";
 node.style.top = touch.pageY + "px";
 }
}

手勢

這個比Touch API要輕易得多。手勢（gestures）事務(wù)在兩根手指任何時辰觸摸屏幕時都邑觸發(fā)。若是任何一根手指落在你綁定了手勢處理懲罰 （gesturestart、gesturechange、gestureend）的節(jié)點上時，你都邑接管到對應(yīng)的事務(wù)。

scale和rotation是這個事務(wù)對象的兩個關(guān)鍵點。因為，用戶在進行捏（pinch）或推（push）的手勢時，scale可以供給給你放 大或縮小的倍數(shù)。而rotation會供給給你用戶在用手指扭轉(zhuǎn)時所產(chǎn)生的角度。

用Gestures API實現(xiàn)縮放和扭轉(zhuǎn)

我們將應(yīng)用Webkit的transform屬性來扭轉(zhuǎn)對象節(jié)點。

var width = 100， height = 200， rotation = ;

node.ongesturechange = function（e）{
 var node = e.target;
 // 縮放和扭轉(zhuǎn)都是相對值，
 // 所以要等手勢停止時再更改我們的變量
 node.style.width = （width * e.scale） + "px";
 node.style.height = （height * e.scale） + "px";
 node.style.webkitTransform = "rotate（" + （（rotation + e.rotation） ％ 360） + "deg）";
}

node.ongestureend = function（e）{
 // 更新這些變量，以備后用
 width *= e.scale;
 height *= e.scale;
 rotation = （rotation + e.rotation） ％ 360;
}

沖突

一些讀者可能已經(jīng)重視到，gesture只是touch事務(wù)的一種看起來更摩登的顯現(xiàn)情勢。完全正確，若是處理懲罰不當(dāng)?shù)脑挘銜l(fā)明一些古怪的行動。 記得在頁面中記錄當(dāng)前所產(chǎn)生的信息，當(dāng)它們呈現(xiàn)沖突時，你也許會讓這些事務(wù)實現(xiàn)”雙贏“。

步履

我把這些事務(wù)組合在一路，做了個簡單的Demo：

這是一個簡單的應(yīng)用，顯現(xiàn)了這些API的令人難以置信的靈活性和才能。這是一個簡單的灰色方塊，可以給它著色、改變邊框樣式，可以拖放、縮放和旋 轉(zhuǎn)。

在iPhone上打開http://tinyurl.com/sp-iphone， 并測驗測驗以下操縱：

把一根手指放到有色彩的方塊上，把另一根手指放在有邊框的方塊上

用兩個有色彩的方塊或兩個有邊框的方塊做雷同的事

用一根手指在頁面上拖放方塊

縮放、扭轉(zhuǎn)方塊

一根手指拖放方塊，同時另一根手指縮放扭轉(zhuǎn)它；移開一根手指，另一根手指持續(xù)拖放它

我還可以做些什么？

經(jīng)由過程Apple今朝供給給我們的這些API，我們能哄騙它們來實現(xiàn)哪些更NB的應(yīng)用？我不清楚。我只知道Apple給了我們一個很沉思熟慮的 API。

這個新的API，我們可以經(jīng)由過程mousedown和mouseup事務(wù)來很輕易的仿照和進修。mousemove倒是一個糟糕的東東。起首，我們只 能在手指接觸后（相當(dāng)于mousedown）才可以獲得touch事務(wù)，而我們不管鼠標(biāo)是否按下，都可以獲得mousemove。此外，防止頁面往返跳動 并不是我們可以主動把握的。若是給document加一個handler，用戶將完全無法遷移轉(zhuǎn)變頁面了！

這也帶給我們常規(guī)拖放體式格式的思慮。盡管拖放在鼠標(biāo)鍵按下的景象下（touchmove的工作體式格式）只和mousemove有關(guān)系，我們?nèi)詻]有任何方 法來決意拖動停止的時辰用戶的手指在什么節(jié)點上（因為target參照源節(jié)點）。若是籌算應(yīng)用一個拖放體系，它就必須知道已注冊的拖動目標(biāo)在頁面上的地位 和尺寸。

---

注：本文譯自http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/， 原作者為nroberts。

總結(jié)

以上是生活随笔為你收集整理的touch事件详解【译文】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。