iPhone Web開(kāi)發(fā)觸摸事件是本文要介紹的內(nèi)容，當(dāng)然，你的 iPhone上是用你的手指來(lái)代替鼠標(biāo)；不再是鼠標(biāo)點(diǎn)擊，而是手指輕敲。還有，你還可以用幾個(gè)手指頭摸啊、敲啊的。所以在 iPhone 上，鼠標(biāo)事件被觸摸事件代替了。這些鼠標(biāo)事件有：

touchstart

touchend

touchmove

touchcancel（當(dāng)系統(tǒng)取消了觸摸）

如果你訂閱了任何這些事件，你的事件監(jiān)聽(tīng)器就會(huì)收到一個(gè)事件對(duì)象。它有一些重要的屬性，比如：

* touches—觸摸對(duì)象集合，與觸摸在屏幕上的手指一對(duì)一。觸摸對(duì)象又有 pageX 和 pageY 屬性來(lái)包含觸摸在頁(yè)面上的坐標(biāo)。

* targetTouches—觸摸目標(biāo)集合，不像觸摸對(duì)象集合，只作用于觸摸對(duì)象寄存的目標(biāo)元素，而不是整個(gè)頁(yè)面。

下面這個(gè)例子是簡(jiǎn)單的拖放實(shí)現(xiàn)。讓我們?cè)诤谏尘绊?yè)畫(huà)一個(gè)框，然后隨便拖放下。現(xiàn)在你要做的就是訂閱 touchmove 事件，當(dāng)手指移動(dòng)的時(shí)候來(lái)更新框子的位置，像這樣：

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 事件偵聽(tīng)器首先取消了手指移動(dòng)的默認(rèn)行為-否則 Safari 會(huì)滾動(dòng)頁(yè)面的。event.targetTouches 集合中包含了在這個(gè) div 元素上所有手指的數(shù)據(jù)列表。我們現(xiàn)在只需要關(guān)心一個(gè)手指，所以我們使用 event.targetTouches[0]。然后， pageX 告訴了手指的 X 坐標(biāo)。從這個(gè)值中減去 div 寬度的一半就是框子的中間了。

小結(jié)：詳解iPhone Web開(kāi)發(fā)觸摸事件的內(nèi)容介紹完了，希望本文對(duì)你有所幫助。