JavaScript 触摸(touch)事件在项目中的应用

狗尾草丛的姑娘3【摘自QQ空间】

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。

一开始使用触摸事件是因为移动端点击事件导致的300ms延迟。不能不使用 触摸事件，触摸分为三种(具体是四种，touchcancel项目中少用)

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。

现在分享下我在项目中应用的心得。为了模仿在苹果手机上点击实现触摸视觉反馈，应用到了触摸事件（css中active也可以实现类似效果，但是存在兼容性问题）

*基于jQuery给大家演示:仿app移动端触摸效果反馈

$("#id").bind('touchstart',function(){

     $(this).addClass("active");//触摸开始时添加active样式

  })

$("#id").bind('touchend',function(){

     $(this).removeClass("active");//触摸j结束移除active样式

})

两个事件同时绑定，就可以实现触摸视觉反馈效果了。如果感兴趣你也可以把它封装成公共的js插件，应用到项目中，有好的心得可以大家一起学习交流

个人学习心得，大神路过 ，不喜勿喷  ，如果代码有错误欢迎纠正同时也欢迎交流，如果你觉得不错，欢迎点赞，订阅，分享出去给需要的人，笔者将非常感谢，如果有疑问请留言或者私信

<完>

福利：如果你是喜欢看书的朋友，不妨点击【有惊喜】这是我在亚马逊买的电子书。都非常珍贵，希望你能喜欢

作者：小处成就大事

简介：一个喜欢分享和学习的前端开发程序猿，平时喜欢看看书，游泳，爬山，户外骑行等，期待与志同道合的你成为朋友，一起交流、一起进步。

初衷：对我来说，写文章是学习和记录一些没有精通和完全掌握的知识点，其次才是分享知识。通过自己查找资料和经验心得整理出来，做到通俗易懂分享给需要的人，分享知识不是为了炫耀，也不是为了谋利，而是为了更多需要汲取知识的人，可以收获知识，同时自己也可以从中收获知识，坚持做知识分享真的很难，但是我会坚持下去····

博客：小处成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和学习，期待你的到来