Biegral Blog

转自：http://www.163css.com/hihilinxuan/log/634923891201737876.html

之前我们做过许多触屏的特效，那么，今天，我们来分析下js的触屏原理。事实上，大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一：对于Touch的处理”，我想这文章许多初学js touch的人都看过。

我们今天以实例来说明吧。在实现触屏中，我们必须采用js的addEventListener，接着加上touchstart,touchmove,touchend。今天我们的代码里加上了jquery，只不过是用来获取ID及CSS，呵呵，毕竟，JQ大家都在用。但对于事件的添加，大家还是得用document,getElementById这种模式，因为这东西只有JS才有，JQUERY里并没有TOUCH这样的东西。

大家可以看到，在代码里有这句话，e.preventDefault（），假设不写这一句，你在触屏的时候，页面就会滑动，所以它的作用是巨大的。。。

e.touches[0]表示什么呢？就是手势里的第一种，我们就认为是touch吧，触屏里还有其它两个手指的手势，我们今天就学一种，呵。。。

我们取得对像的left,top及手的触屏位置，这时，touchstart完成了。。。

我们那个isdrag是用来判断是否可以拖动的，我们用手拖动后的位置加上对像的位置减去touchstart时的位置，就可以取得移动后的位置，这样，我们就完成了touchmove这个过程。。

 对于touchend，我们就写上一个ifdrag=false,表示不再拖动啦。。。

以下我提供源文件，欢迎有需要的朋友下载使用：

预览地址：http://www.163css.net/net163/cssjs/2012/12/touch.html

下载地址：js touch触屏原理分析.rar