詳解iPhone Web開發觸摸事件

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開發觸摸事件的內容介紹完了，希望本文對你有所協助。