HTML5的触摸功能真心好用，尤其是在手机这个小小的设备上，玩儿得不亦乐乎。今天就让我来教你如何玩转HTML5的触摸体验！首先咱们要了解啥叫“触碰”、“滑动”和“结束”，然后再来分别看看他们都有啥用处、咋用以及适合在哪种情境下。当然，还要聊聊跟其他浏览器之间的关系哟～
触摸事件的起源
其实，触屏就是为上网设计的，而HTML 5加入了这个功能。想当初，就是苹果的iPhone 3GS率先用上了触屏，Safari是第一个吃螃蟹的，紧接着Android这些系统也不甘落后。毕竟在手机上又不能用电脑那种鼠标键盘，触屏功能当然就显得尤为重要！
触摸事件类型
HTML5里有个传家宝，名叫触碰三剑客：touchstart、touchmove和touchend。你把手指往屏幕上轻轻一点，touchstart就立马来互动；接着随便一滑，touchmove就紧跟其后；当你收手离开时，touchend就告知浏览器你的操作结束了。有了这几位大神级的保镖，你的小玩具瞬间就能玩遍所有触控式的新花样！
触摸事件属性详解
每个触摸事件里头都隐藏着许多好用的特性喔，比如你应该很熟的DOM特性（例如冒泡、可否被撤销，还有客户端的坐标这些），当然了也少不了那些专为追踪手指动作的特别元素（像触摸、目标触摸或是变化触摸这些）。这样一来，我们就能够准确地把握并响应你的手势了
触摸事件应用场景
手机上，用手势滑动屏幕就可以完成很多操作了，比如翻页啥的，还能拖动调整顺序，而且立刻就能看到效果。比如说看图片，轻轻点一下图子，它就不会到处乱跑了，然后还能用手指滑动去看下一张。不用再动手，自然而然地就跳到下一张图了，真方便！这全靠触摸屏技术带来的好处，使得手机更好用也更有趣。
触摸事件与鼠标事件
虽然DOM规范说的有点绕，但其实它只是用我们熟悉的那套方式来处理触摸事件。就像鼠标那样，每个Touch对象都能通过你的动作算出位置。而且，还有专门应对多点触控的家伙们，如touches、targetTouches和changeTouches之类。这样以来，无论哪个设备都能用得顺手多了。
兼容性情况分析
function load (){
document.addEventListener('touchstart',touch,false);
document.addEventListener('touchmove',touch,false);
document.addEventListener('touchend',touch,false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML ="Touch started (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
break;
case "touchend":
oInp.innerHTML ="
Touch end (" + event.changedTouches[0].clientX +"," + event.changedTouches[0].clientY +")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML ="
Touch moved (" + event.touches[0].clientX +"," + event.touches[0].clientY +")";
break;
}
}
}
window.addEventListener('load',load,false);
当然，要是你的手机浏览器有HTML5功能的话，那触控功能可得重视起来。现在好多手机浏览器都开始支持触摸操作，像苹果家的Safari，安卓系统的WebKit，还有三星的Bada Dolphin、黑莓OS6及以后版本的WebKit，还有OPERA MOBILE 10.1以及更新后的版本，连LG的Phantom浏览器也不错。看样子，不管什么牌子的手机，里面自带的浏览器应该都能搞定，HTML5技术让你的app能在任何手机上流畅运行呐！
总结与展望
来看看咱们的HTML5触碰技术详解，了解下这玩意儿为什么那么火爆以及它在手机网站上的新花样。如今，人人都爱好用快速的手机网页。我敢说，未来HTML5肯定还能玩出更牛的交互效果！
咱们今天聊聊HTML5实践与解析中，怎么处理触摸事件这个主题！主要是想分享下，这种技术在做手机应用的时候到底有多重要，以及将来可能会有什么样的发展方向。读完这篇文章后，你肯定能更加了解HTML5对互动功能的掌握能力了！
评论0