?iOS上的Safari也支持click 和mouseover等傳統的交互事件，只是不推薦在iOS的瀏覽器應用上使用click和mouseover，因為這兩個事件是為了支持鼠標點擊而設計 出來的。Click事件在iOS上會有半秒左右的延遲，原因是iOS要highlight接收到click的element。而 mouseover/out等事件則會被手指的點擊觸發。所以，在iOS上，應當拋棄傳統的交互事件模型而接受一個新的事件模型。Touch事件和更高級 的Gesture事件，能讓你的網頁交互起來像native應用一樣。

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

touchstart:??手指放到屏幕上的時候觸發

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

touchend:??手指從屏幕上拿起的時候觸發

touchcancel:??系統取消touch事件的時候觸發。至于系統什么時候會取消，不詳。。

????Gesture事件則是對touch事件的更高級的封裝，主要處理手指slide、rotate、scale等動作，將在下一篇文章詳述。

????在開始描述touch事件之前，需要先描述一下多觸式系統中特有的touch對象（android和iOS乃至nokia最新的meego系統都模擬了類 似的對象，這里只針對iOS，因為我只有iPad可用于測試。。）。這個對象封裝一次屏幕觸摸，一般來自于手指。它在touch事件觸發的時候產生，可以 通過touch event handler的event對象取到（一般是通過event.changedTouches屬性）。這個對象包括一些重要的屬性：

client / clientY：觸摸點相對于瀏覽器窗口viewport的位置

pageX / pageY：觸摸點相對于頁面的位置

screenX /screenY：觸摸點相對于屏幕的位置

identifier： touch對象的unique ID

????我們從一個單根手指觸摸的實例開始進入多觸式網頁的世界。當一根手指放下的時候，屏幕上出現一個方塊，手指移動方塊也隨著移動，手指提起方塊消失。首先，讓我們定義一下方塊的css：

Javascript代碼?

.spirit?{??????????????/?*?方塊的class名稱*/??

??

?????????position:?absolute;??

??

?????????width:?50px;??

??

?????????height:?50px;??

??

?????????background-color:?red;??

??

}??

????然后，在body下定義一個接收事件的容器，這里body的height必須是100%才能占滿整個viewport：

Html代碼?

<body?style=”height:?100%;margin:0;padding:0”>??

??

<div?id=”canvas”??style=”position:?relative;width:100%;height:?100%;”></div>??

??

</body>??

????定義touchstart的事件處理函數，并綁定事件：

Javascript代碼?

//?define?global?variable??

??

var?canvas?=?document.getElementByIdx_x_x_x(“canvas”),??

??

???????spirit,?startX,?startY;??

??

//?touch?start?listener??

??

function?touchStart(event)?{??

??

?????????event.preventDefault();??

??

?????????if?(spirit?||!?event.touches.length)?return;??

??

?????????var?touch?=?event.touches[0];??

??

?????????startX?=?touch.pageX;??

??

?????????startY?=?touch.pageY;??

??

?????????spirit?=?document_createElement_x_x_x(“div”);??

??

?????????spirit.className?=?“spirit”;??

??

?????????spirit.style.left?=?startX;??

??

?????????spirit.style.top?=?startY;??

??

?????????canvas.a(spirit);??

??

}??

??

//?add?touch?start?listener??

??

canvas.addEventListener(“touchstart”,?touchStart,?false);??

????首先，我們將方塊spirit作為一個全局對象，因為我們現在要測試單根手指所以屏幕上最好只有一個物體在移動（等會有多觸實例）。在 touchStart這個事件處理函數中，我們也首先判斷了是否已經產生了spirit，也就是是否已經有一個手指放到屏幕上，如果是，直接返回。

????和傳統的event listener一樣，多觸式系統也會產生一個event對象，只不過這個對象要多出一些屬性，比如這里的event.touches，這個數組對象獲得 屏幕上所有的touch。注意這里的event.preventDefault()，在傳統的事件處理函數中，這個方法阻止事件的默認動作，觸摸事件的默 認動作是滾屏，我們不想屏幕動來動去的，所以先調用一下這個函數。我們取第一個touch，將其pageX/Y作為spirit創建時的初始位置。接下 來，我們創建一個div，并且設置className，left，top三個屬性。最后，我們把spirit對象a到容器中。這樣， 當第一根手指放下的時候，一個紅色的，50px見方的方塊就放到屏幕上了。

????然后，我們要開始處理手指在屏幕上移動的事件：

Javascript代碼?

function?touchMove(event)?{??

??

?????????event.preventDefault();??

??

?????????if?(!spirit?||?!event.touches.length)?return;??

??

?????????var?touch?=?event.touches[0],??

??

??????????????x?=?touch.pageX?–?startX,??

??

???????????????y?=?touch.pageY?–?startY;??

??

?????????spirit.style.webkitTransform?=?'translate('?+?x?+?'px,?'?+?y?+?'px)';???????

??

}??

??

Canvas.addEventListener(“touchmove”,?touchMove,?false);??

????在touch move listener中，我們使用webkit特有的css屬性：webkitTransform來移動方塊，這個屬性具體怎么用請google之。建議構造 面向iOS設備的網頁的時候盡量使用webkit自己的特性，不但炫，更可以直接利用硬件來提高性能。

????最后，我們處理touchend事件。手指提起的時候方塊從屏幕上移除。

Javascript代碼?

function?touchEnd(event)?{??

??

?????????If?(!spirit)?return;??

??

?????????canvas.removeChild(spirit);??

??

?????????spirit?=?null;??

??

}??

??

canvas.addEventListener(“touchend”,?touchEnd,?false);??

在你的ipad或者iphone上測試一下以上代碼。如果不出意外的話，一個完整的多觸式web程序就誕生了。。

這種事件處理模式雖然能夠滿足我們開發多觸式網頁應用的需求，但是start – move – end的流程有點繁瑣，能不能封裝一些常用的動作讓我們用一個event handler就能解決問題呢。沒錯，Gesture事件就是為了這個目的設計出來的，它封裝了手指的scale, slide, rotate等常用的動作。不過，下一章我們再來討論這個問題。。

附件是一個更加復雜一些的例子，每根手指放下的時候都會產生一個不同顏色的方塊，手指動的時候方塊跟著動，手指提起的時候方塊消失，請下載查看試用。


通過附件所包含的實例，我們可以看出一些較為隱蔽的特性。首先，這里我們沒有再使用event.touches取所有touch的對象，而是使用 event.changedTouches這個數組，用來取得所有跟本次事件相關的touch。但是，這里我發現一個奇怪的特性，不知道是我的ipad有 問題還是本來就是這樣，就是在有多根手指放在屏幕上的時候，如果提起一根手指，touchend事件的changedTouches中會包含所有手指的 touch對象，然后，其他幾根留在屏幕上的手指會重新觸發touchstart，并刷新所有的touch對象（identifier都不一樣了）。如果 這是一個所有設備都有的特性，那么將給編程者帶來一些不便，不知道水果為啥要這么處理。

對touch event的介紹我們點到為止，這里給大家推薦兩篇文檔：

Safari dom additions reference: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariJSRef/Intro/Intro.html#//apple_ref/doc/uid/TP40001482-CH2g-BAJDAJAG

Safari web content guide:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/Introduction/Introduction.html?

轉載于:https://www.cnblogs.com/hfgb/p/7115837.html

總結

以上是生活随笔為你收集整理的移动WEB开发之JS内置touch事件[转]的全部內容，希望文章能夠幫你解決所遇到的問題。

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