webapp触摸事件介绍：touch事件使用 -

魏祖清

浏览: 180203 次
性别:
来自: 福建

最近访客更多访客>>

xuchong2013

蕃薯耀

yan578351314

woaiwangrong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

webapp触摸事件介绍：touch事件使用

博客分类：

mobile

   水果公司的那些small and cute的设备给我们提供了前所未有的用户体验。当用户iphone和ipad上运指如飞的时候，那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感，因为正是他们（而不是水果）让iOS的世界变的丰富多彩。然而对于我们这些以web为自己事业核心的程序员来说，这种让人欲罢不能的多触式体验似乎跟我们关系不大，因为浏览器那一小块地方就是我们和用户的全部交集了。而许多网站为了让iOS的用户能够在多触式体验下使用自己的服务，都专门花钱开发objective-c的本地程序作为自webservice的客户端。
    其实，对于一个web程序员或者一个网站来说，如果你的需求仅仅是让iPhone/iPad用户能够正常使用你的服务，那现有的html4页面完全能够满足（也许需要一点点重构，但是很容易）；如果再往上一点，你需要让你的web客户端看起来像是用objective-c实现的一样，也并非不可能，只需要将我们熟悉的javascript搬到iOS设备上来就行。
    本文从一个多触式网页开发初学者的角度，首先简单介绍一下iOS上的浏览器（这里主要指Safari）所支持的多触式事件模型，然后将触控（Touch）这种简单的动作升级为手势（Gestrue），最后将javascript + html + css构建的应用脱离浏览器，放到iOS设备的屏幕上成为一个本地link并和植物大战僵尸放到一起。
    iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和mouseover，因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟，原因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以，在iOS上，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件，能让你的网页交互起来像native应用一样。
    处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

touchstart:  // 手指放到屏幕上的时候触发  
touchmove:  // 手指在屏幕上移动的时候触发  
touchend:  // 手指从屏幕上拿起的时候触发  
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。

Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动作，将在下一篇文章详述。
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类似的对象，这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以通过touch event handler的event对象取到（一般是通过event.changedTouches属性）。这个对象包括一些重要的属性：

client / clientY：// 触摸点相对于浏览器窗口viewport的位置  
pageX / pageY：// 触摸点相对于页面的位置  
screenX /screenY：// 触摸点相对于屏幕的位置  
identifier： // touch对象的unique ID

下面我们看一个简单例子：当手指触摸屏幕时弹出一个红色层，手指动时跟着动，手指离开时层消失

.spirit {              /* 方块的class名称*/
         position: absolute; 
         width: 50px; 
         height: 50px; 
         background-color: red; 
}

<body style=”height: 100%;margin:0;padding:0”> 
  
<div id=”canvas”  style=”position: relative;width:100%;height: 100%;”></div> 
  
</body>

定义touchstart的事件处理函数，并绑定事件：

// define global variable 
  
var canvas = document.getElementById(“canvas”), 
       spirit, startX, startY; 
    // touch start listener 
  
function touchStart(event) { 
         event.preventDefault(); 
         if (spirit ||! event.touches.length) return; 
         var touch = event.touches[0]; 
         startX = touch.pageX; 
         startY = touch.pageY; 
         spirit = document.createElement(“div”); 
         spirit.className = “spirit”; 
         spirit.style.left = startX; 
         spirit.style.top = startY; 
         canvas.appendChild(spirit); 
} 
  
// add touch start listener 
canvas.addEventListener(“touchstart”, touchStart, false);

首先，我们将方块spirit作为一个全局对象，因为我们现在要测试单根手指所以屏幕上最好只有一个物体在移动（等会有多触实例）。在touchStart这个事件处理函数中，我们也首先判断了是否已经产生了spirit，也就是是否已经有一个手指放到屏幕上，如果是，直接返回。
和传统的event listener一样，多触式系统也会产生一个event对象，只不过这个对象要多出一些属性，比如这里的event.touches，这个数组对象获得屏幕上所有的touch。注意这里的event.preventDefault()，在传统的事件处理函数中，这个方法阻止事件的默认动作，触摸事件的默认动作是滚屏，我们不想屏幕动来动去的，所以先调用一下这个函数。我们取第一个touch，将其pageX/Y作为spirit创建时的初始位置。接下来，我们创建一个div，并且设置className，left，top三个属性。最后，我们把spirit对象appendChild到容器中。这样，当第一根手指放下的时候，一个红色的，50px见方的方块就放到屏幕上了。
然后，我们要开始处理手指在屏幕上移动的事件：

function touchMove(event) { 
         event.preventDefault(); 
         if (!spirit || !event.touches.length) return; 
         var touch = event.touches[0], 
              x = touch.pageX – startX, 
              y = touch.pageY – startY; 
         spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';      
} 
  
Canvas.addEventListener(“touchmove”, touchMove, false);

在touch move listener中，我们使用webkit特有的css属性：webkitTransform来移动方块，这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽量使用webkit自己的特性，不但炫，更可以直接利用硬件来提高性能。
最后，我们处理touchend事件。手指提起的时候方块从屏幕上移除。

function touchEnd(event) { 
         If (!spirit) return; 
         canvas.removeChild(spirit); 
         spirit = null; 
} 
  
canvas.addEventListener(“touchend”, touchEnd, false);

分享到：

webapp触摸事件介绍：处理简单手势 | web App 开发技术要点总结

2013-05-13 17:19
浏览 2031
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

webapp触摸事件介绍：touch事件使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

webapp触摸事件介绍：touch事件使用

评论

发表评论

相关推荐

Iscroll4使用遇到问题探讨

webapp触摸事件介绍：处理复杂手势

webapp触摸事件介绍：处理简单手势

web App 开发技术要点总结

web手机开发（iPhone和Andriod）关于position:fixed 属性的讨论

最近访客更多访客>>