iPhone Web開發觸摸事件是本文要介紹的內容，當然，你的 iPhone上是用你的手指來代替鼠標；不再是鼠標點擊，而是手指輕敲。還有，你還可以用幾個手指頭摸啊、敲啊的。所以在 iPhone 上，鼠標事件被觸摸事件代替了。這些鼠標事件有：

touchstart

touchend

touchmove

touchcancel（當系統取消了觸摸）

如果你訂閱了任何這些事件，你的事件監聽器就會收到一個事件對象。它有一些重要的屬性，比如：

* touches—觸摸對象集合，與觸摸在屏幕上的手指一對一。觸摸對象又有 pageX 和 pageY 屬性來包含觸摸在頁面上的坐標。

* targetTouches—觸摸目標集合，不像觸摸對象集合，只作用于觸摸對象寄存的目標元素，而不是整個頁面。

下面這個例子是簡單的拖放實現。讓我們在黑色背景頁畫一個框，然后隨便拖放下。現在你要做的就是訂閱 touchmove 事件，當手指移動的時候來更新框子的位置，像這樣：

window.addEventListener('load', function() {    
 var b = document.getElementById('box'),  
     xbox = b.offsetWidth  / 2, // half the box width  
     ybox = b.offsetHeight / 2, // half the box height  
     bbstyle = b.style; // cached access to the style object    
 b.addEventListener('touchmove', function(event) {  
   event.preventDefault(); // the default behaviour is scrolling  
   bstyle.left =  event.targetTouches[0].pageX - xbox + 'px';  
   bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px';  
 }, false);    
}, false); 

touchmove 事件偵聽器首先取消了手指移動的默認行為-否則 Safari 會滾動頁面的。event.targetTouches 集合中包含了在這個 div 元素上所有手指的數據列表。我們現在只需要關心一個手指，所以我們使用 event.targetTouches[0]。然后， pageX 告訴了手指的 X 坐標。從這個值中減去 div 寬度的一半就是框子的中間了。

小結：詳解iPhone Web開發觸摸事件的內容介紹完了，希望本文對你有所幫助。