移動WEB開發之JS內置touch事件[轉]

時間 2019-11-12

標籤移動 web 開發內置 touch 事件欄目無線简体版

原文原文鏈接

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：

css

Javascript代碼

.spirit { / * 方塊的class名稱*/
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}

而後，在body下定義一個接收事件的容器，這裏body的height必須是100%才能佔滿整個viewport：

html

Html代碼

<body style=」height: 100%;margin:0;padding:0」>
<div id=」canvas」 style=」position: relative;width:100%;height: 100%;」></div>
</body>

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

android

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見方的方塊就放到屏幕上了。

    而後，咱們要開始處理手指在屏幕上移動的事件：

web

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 canvas