前面我們介紹過移動設(shè)備中一些設(shè)備事件，例如手機(jī)旋轉(zhuǎn)90度、傾斜等設(shè)置放置姿態(tài)變化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件，接下由南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開發(fā)工程師向大介紹在移動端的觸摸事件。
? ? ? ?iOS版 Safari為了向開發(fā)人員傳達(dá)一些特殊信息，新增了一些專有事件。因為 iOS設(shè)備既沒有鼠標(biāo) 也沒有鍵盤，所以在為移動 Safari開發(fā)交互性網(wǎng)頁時，常規(guī)的鼠標(biāo)和鍵盤事件根本不夠用。隨著 Android 中的 WebKit 的加入，很多這樣的專有事件變成了事實標(biāo)準(zhǔn)，導(dǎo)致 W3C開始制定 Touch Events規(guī)范（參 見 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html）。以下介紹的事件只針對觸摸設(shè)備。?
? ? ? ?觸摸事件包含 iOS 2.0軟件的 iPhone 3G發(fā)布時，也包含了一個新版本的 Safari瀏覽器。這款新的移動 Safari 提供了一些與觸摸（touch）操作相關(guān)的新事件。后來，Android上的瀏覽器也實現(xiàn)了相同的事件。觸摸 事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發(fā)。具體來說，有以下幾個觸 摸事件。?
? ? ? ?touchstart：當(dāng)手指觸摸屏幕時觸發(fā)；即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)。?
? ? ? ?touchmove：當(dāng)手指在屏幕上滑動時連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault() 可以阻止?jié)L動。?
? ? ? ?touchend：當(dāng)手指從屏幕上移開時觸發(fā)。?
? ? ? ?touchcancel：當(dāng)系統(tǒng)停止跟蹤觸摸時觸發(fā)。關(guān)于此事件的確切觸發(fā)時間，文檔中沒有明確說明。?
? ? ? ?上面這幾個事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在 DOM規(guī)范中定義，但它們卻 是以兼容 DOM的方式實現(xiàn)的。因此，每個觸摸事件的 event 對象都提供了在鼠標(biāo)事件中常見的屬性： bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。?
? ? ? ?除了常見的 DOM屬性外，觸摸事件還包含下列三個用于跟蹤觸摸的屬性。?
? ? ? ?touches：表示當(dāng)前跟蹤的觸摸操作的 Touch 對象的數(shù)組。
? ? ? ?targetTouchs：特定于事件目標(biāo)的 Touch 對象的數(shù)組。?
? ? ? ?changeTouches：表示自上次觸摸以來發(fā)生了什么改變的 Touch 對象的數(shù)組。 每個 Touch 對象包含下列屬性。?
? ? ? ?clientX：觸摸目標(biāo)在視口中的 x坐標(biāo)。?
? ? ? ?clientY：觸摸目標(biāo)在視口中的 y坐標(biāo)。?
? ? ? ?identifier：標(biāo)識觸摸的唯一 ID。 ?
? ? ? ?pageX：觸摸目標(biāo)在頁面中的 x坐標(biāo)。?
? ? ? ?pageY：觸摸目標(biāo)在頁面中的 y坐標(biāo)。?
? ? ? ?screenX：觸摸目標(biāo)在屏幕中的 x坐標(biāo)。?
? ? ? ?screenY：觸摸目標(biāo)在屏幕中的 y坐標(biāo)。?
? ? ? ?target：觸摸的 DOM節(jié)點目標(biāo)。 使用這些屬性可以跟蹤用戶對屏幕的觸摸操作。來看下面的例子。?



? ? ? ?
? ? ? ?


? ? ? ?

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