JavaScript觸控與手勢事件

ios版safari為了向開發人員傳達一些特殊資訊，新增了一些專有事件。因為ios裝置既沒有滑鼠也沒有鍵盤，所以在為移動safari開發互動網頁時，常規的滑鼠和鍵盤事件根本不夠用。隨著android中的webkit的加入，很多這樣的專有事件變成了事實標準。

包含ios2.0軟體的iphone 3g發布時，也包含了乙個新版本的safari瀏覽器。這款新的移動safari提供了一些與觸控(touch)操作相關的新事件。後來,android上的瀏覽器也實現了相同的事件。觸控事件會在使用者手指放在螢幕上面時、在螢幕上滑動時或從螢幕上移開時觸發。具體來說，有以下幾個觸控事件。

上面這幾個事件都會冒泡，也都可以取消。雖然這些觸控事件沒有在dom規範中定義，但它們卻是以相容dom的方式實現的。因此，每個觸控事件沒有在dom規範中定義，但它們卻是以相容dom的方式實現的。因此，每個觸控事件的event物件都提供了在滑鼠事件中常見的屬性:bubbles、cancelable、view、clientx、clienty、screenx、screeny、detail、altkey、shiftkey、ctrlkey和metakey。

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

每個touch物件包含下列屬性。

使用這些屬性可以跟蹤使用者對螢幕觸控操作。來看下面的例子。

function handletouchevent(event) 
}}document.addeventlistener("touchstart", handletouchevent, false);
document.addeventlistener("touchend", handletouchevent, false);
document.addeventlistener("touchmove", handletouchevent, false);

以上**會跟蹤螢幕上發生的一次觸控操作。為簡單起見，只會在有一次活動觸控操作的情況下輸出資訊。當touchstart事件發生時。會將觸控的位置資訊輸出到

元素中。當touchmove事件發生時，會取消其預設行為，阻止滾動（觸控移動的預設行為是滾動頁面），然後輸出觸控操作的變化資訊。而touched事件則會輸出有關觸控操作的最終資訊。注意，在touched事件發生時，touched集合中就沒有任何touch物件了，因為不存在活動的觸控操作;此時，就必須轉而使用changetouchs集合。

這些事件會在文件的所有元素上面觸發，因而可以分別操作頁面的不同部分。在觸控螢幕上的元素時，這些事件發生的數序如下：

touchstart

mouseover

mousemove

mousedown

mouseup

click

touchend

支援觸控事件的瀏覽器包括ios版safari、android版webkit、beta版dolfin、os6+中的blackberry webkit、opera mobile 10.1和lg專有os中的phantom瀏覽器。目前只有ios版safari支援多點觸屏。桌面版firefox 6+和chrome也支援觸控事件。

ios 2.0中的safari還引入了一組手勢事件。當兩個手指觸控螢幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別如下。

只有兩個手指都觸控到事件的接收容器時才會觸發這些事件。在乙個元素上設定事件處理程式，意味著兩個手指必須同時位於該元素的範圍之內，才能觸發手勢事件（這個元素就是目標）。由於這些事件冒泡，所以將事件處理程式放在文件上也可以處理所有手勢事件。此時，事件的目標就是兩個手指都位於其範圍內的那個元素。

觸控事件和手勢事件之間存在某種關係。當乙個手指放在螢幕上時，會觸發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) 
}document.addeventlistener("gesturestart", handlegestureevent, false);
document.addeventlistener("gestureend", handlegestureevent, false);
document.addeventlistener("gesturechange", handlegestureevent, false);

與前面演示觸控事件的例子一樣，這裡的**只是將每個事件都關聯到同乙個函式中，然後通過該函式輸出每個事件的相關資訊。

ps:觸控事件也會返回rotation和scale屬性，但這兩個屬性只會在兩個手指與螢幕保持接觸時才會發生變化。一般來說，使用基於兩個手指的手勢事件，要比管理觸控事件中的所有互動要容易的多。

JavaScript觸控與手勢事件

觸控與手勢

iOS觸控事件與手勢

iOS開發觸控與手勢

JavaScript觸控與手勢事件

觸控與手勢

iOS觸控事件與手勢

iOS開發 觸控與手勢

相關推薦

iOS開發觸控與手勢