前面我們介紹了移動端的觸摸事件，其中有touchstar、touchmove、touchend、touchcancel,同時還有相關三個用于跟蹤觸摸屬性,分別為touches、targetTouchs、changeTouches，因為觸摸事件和手勢事件兩者是相輔相成的,若對觸摸事件不太熟悉,可以點擊《觸摸事件中touchstar、touchmove、touchend、touchcancel事件應用方法及實例》再看下.接下由南昌網站制作公司百恒網絡前端開發(fā)工程師向大介紹在移動端的手勢事件。
? ? ? 只有兩個手指都觸摸到事件的接收容器時才會觸發(fā)這些事件。在一個元素上設置事件處理程序，意 味著兩個手指必須同時位于該元素的范圍之內，才能觸發(fā)手勢事件（這個元素就是目標）。由于這些事 件冒泡，所以將事件處理程序放在文檔上也可以處理所有手勢事件。此時，事件的目標就是兩個手指都 位于其范圍內的那個元素。?
? ? ? ?觸摸事件和手勢事件之間存在某種關系。當一個手指放在屏幕上時，會觸發(fā) touchstart 事件。如 果另一個手指又放在了屏幕上，則會先觸發(fā) gesturestart 事件，隨后觸發(fā)基于該手指的 touchstart 事件。如果一個或兩個手指在屏幕上滑動，將會觸發(fā) gesturechange 事件。但只要有一個手指移開， 就會觸發(fā) gestureend 事件，緊接著又會觸發(fā)基于該手指的 touchend 事件。?
? ? ? ?與觸摸事件一樣，每個手勢事件的 event 對象都包含著標準的鼠標事件屬性：bubbles、 cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。此外，還包含兩個額外的屬性：rotation 和 scale。其中，rotation 屬性表 示手指變化引起的旋轉角度，負值表示逆時針旋轉，正值表示順時針旋轉（該值從 0開始）。而 scale 屬性表示兩個手指間距離的變化情況（例如向內收縮會縮短距離）；這個值從 1 開始，并隨距離拉大而 增長，隨距離縮短而減小。 下面是使用手勢事件的一個示例。?



? ? ? ?



? ? ? ?

Touch anywhere on the screen with two fingers. This only works on an iPhone or iPod Touch running iPhone 2.x software.

? ? ? ?與前面演示觸摸事件的例子一樣，這里的代碼只是將每個事件都關聯到同一個函數中，然后通過該 函數輸出每個事件的相關信息。?
? ? ? ?觸摸事件也會返回 rotation 和 scale 屬性，但這兩個屬性只會在兩個手指與 屏幕保持接觸時才會發(fā)生變化。一般來說，使用基于兩個手指的手勢事件，要比管理 觸摸事件中的所有交互要容易得多。?

? 本文僅限內部技術人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網站建設公司-百恒網絡http://www.gimmickmag.com/如轉載請注明出處!