当然，你在你的 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
     bstyle = 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 宽度的一半就是框子的中间了。

作者: Jxj 发表于 2011-07-30 16:49 原文链接