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

以下為原文：

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

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

清理思路

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

觸摸

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

有以下touch事務：

touchstart: 手指放在屏幕上時觸發

touchend: 手指分開屏幕時觸發

touchmove: 手指在屏幕上移動時觸發

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

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

我的第一個錯誤，產生在監聽這些事務并試著獲得這些事務的坐標（pageX， pageY等）時。在再一次看了ADC的文檔后，我懂得了這三個事務依附于對象。但我不克不及十分斷定，所以我去測試、記錄、實驗。

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

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

下面就是這個列表：

touches: 每個接觸屏幕的手指所產生的信息

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

changedTouches: 只包含與當前事務相干的每個手指信息（見下文）

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

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

當我放上第二根手指，touches會變為兩項，每一根手指都有一項。只當第二根手指放在第一根手指地點節點上時，targetTouches才 會變成兩 個項。changedTouches的信息和第二根手指有關，因為它觸發了事務。

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

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

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

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

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

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

clientX: touch事務相對于視圖（viewport）的X軸坐標（不包含遷移轉變位移）

clientY: touch事務相對于視圖（viewport）的Y軸坐標（不包含遷移轉變位移）

screenX: 相對于屏幕

screenY: 相對于屏幕

pageX: 相對于全部頁面（包含遷移轉變）

pageY: 相對于全部頁面（包含遷移轉變）

target: touch事務所產生的節點

identifier: 一個id號，為每一個touch事務供給獨一標識

對于桌面Web設計而言，在一個常規的mousemove事務中，進入節點的target屬性凡是是鼠標當前懸停的屬性。然則在所有的iPhone Touch事務中，target則是參照于源節點。

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

用Touch API來實現拖放

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

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

手勢

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

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

用Gestures API實現縮放和扭轉

我們將應用Webkit的transform屬性來扭轉對象節點。

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

node.ongesturechange = function（e）{
 var node = e.target;
 // 縮放和扭轉都是相對值，
 // 所以要等手勢停止時再更改我們的變量
 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;
}

沖突

一些讀者可能已經重視到，gesture只是touch事務的一種看起來更摩登的顯現情勢。完全正確，若是處理懲罰不當的話，你會發明一些古怪的行動。 記得在頁面中記錄當前所產生的信息，當它們呈現沖突時，你也許會讓這些事務實現”雙贏“。

步履

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

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

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

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

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

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

縮放、扭轉方塊

一根手指拖放方塊，同時另一根手指縮放扭轉它；移開一根手指，另一根手指持續拖放它

我還可以做些什么？

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

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

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

---

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。