JavaScript觸摸與手勢事件

JavaScript觸摸與手勢事件

發表於 2012-12-10 由 admin

iOS版Safari爲了向開發人員傳達一些特殊信息，新增了一些專有事件。由於iOS設備既沒有鼠標也沒有鍵盤，因此在爲移動Safari開發交互網頁時，常規的鼠標和鍵盤事件根本不夠用。隨着Android中的WebKit的加入，不少這樣的專有事件變成了事實標準。

1.觸摸事件

包含iOS2.0軟件的iPhone 3G發佈時，也包含了一個新版本的Safari瀏覽器。這款新的移動Safari提供了一些與觸摸(touch)操做相關的新事件。後來,Android上的瀏覽器也實現了相同的事件。觸摸事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。具體來講，有如下幾個觸摸事件。

• touchstart:當手指觸摸屏幕時觸發；即便已經有一個手指放在了屏幕上也會觸發。
• touchmove:當手指在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。
• touchend:當手指從屏幕上移開時觸發。
• touchcancel:當系統中止跟蹤觸摸時觸發。關於此事件的確切觸發事件，文檔中沒有明確說明。

上面這幾個事件都會冒泡，也均可以取消。雖然這些觸摸事件沒有在DOM規範中定義，但它們倒是以兼容DOM的方式實現的。所以，每一個觸摸事件沒有在DOM規範中定義，但它們倒是以兼容DOM的方式實現的。所以，每一個觸摸事件的event對象都提供了在鼠標事件中常見的屬性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

除了常見的DOM屬性外，觸摸事件還包含下列三個用於跟蹤觸摸的屬性。

• touches:表示當前跟蹤的觸摸操做的Touch對象的數組。
• targetTouches:特定於事件目標的Touch對象的數組。
• changeTouches:表示自上次觸摸以來發生了什麼改變的Touch對象的數組。

每一個Touch對象包含下列屬性。

• clientX:觸摸目標在視口中的X座標。
• clientY:觸摸目標在視口中的Y座標。
• identifier：表示觸摸的惟一ID。
• pageX：觸摸目標在頁面中的x座標。
• pageY：觸摸目標在頁面中的y座標。
• screenX:觸摸目標在屏幕中的x座標。
• screenY:觸摸目標在屏幕中的y座標。
• target:觸摸的DOM節點座標。

使用這些屬性能夠跟蹤用戶對屏幕觸摸操做。來看下面的例子。

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();//阻止滾動
                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);

以上代碼會跟蹤屏幕上發生的一次觸摸操做。爲簡單起見，只會在有一次活動觸摸操做的狀況下輸出信息。當touchstart事件發生時。會將觸摸的位置信息輸出到

元素中。當touchmove事件發生時，會取消其默認行爲，阻止滾動（觸摸移動的默認行爲是滾動頁面），而後輸出觸摸操做的變化信息。而touched事件則會輸出有關觸摸操做的最終信息。注意，在touched事件發生時，touched集合中就沒有任何Touch對象了，由於不存在活動的觸摸操做;此時，就必須轉而使用changeTouchs集合。

這些事件會在文檔的全部元素上面觸發，於是能夠分別操做頁面的不一樣部分。在觸摸屏幕上的元素時，這些事件發生的數序以下：

1. touchstart
2. mouseover
3. mousemove
4. mousedown
5. mouseup
6. click
7. touchend

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

2.手勢事件

IOS 2.0中的Safari還引入了一組手勢事件。當兩個手指觸摸屏幕時就會產生手勢，手勢一般會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別以下。

• gesturestart:當一個手指已經按在屏幕上面另外一個手指有觸摸屏幕時觸發。
• gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。
• gestureend:當任何一個手指從屏幕上面移開時觸發。

只有兩個手指都觸摸到事件的接收容器時纔會觸發這些事件。在一個元素上設置事件處理程序，意味着兩個手指必須同時位於該元素的範圍以內，才能觸發手勢事件（這個元素就是目標）。因爲這些事件冒泡，因此將事件處理程序放在文檔上也能夠處理全部手勢事件。此時，事件的目標就是兩個手指都位於其範圍內的那個元素。

觸摸事件和手勢事件之間存在某種關係。當一個手指放在屏幕上時，會觸發touchstart事件。若是另外一個手指又放在了屏幕上，則會先觸發gesturestart事件。若是另外一個手指又放在了屏幕上，則會先觸發gesturestart事件，隨後觸發基於該手指的touchstart事件。若是一個或兩個手指在屏幕上滑動，將會觸發gesturechange事件，但只要有一個手指移開，就會觸發gestureend事件，緊接着又會觸發基於該手指的touchend事件。

與觸摸事件同樣，每一個手勢事件的event對象都包含着標準的鼠標事件屬性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，還包含兩個額外的屬性：rotation和scale。其中,rotation屬性表示手指變化引發的旋轉角度，負值表示逆時針旋轉，正值表示順時針旋轉（該值從0開始）。而scale屬性表示兩個手指間距的變化狀況（例如向內收縮會縮短距離）;這個值從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);

與前面演示觸摸事件的例子同樣，這裏的代碼只是將每一個事件都關聯到同一個函數中，而後經過該函數輸出每一個事件的相關信息。