js touch触屏原理分析
之前我们做过许多触屏的特效,那么,今天,我们来分析下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,表示不再拖动啦。。。
js touch触屏原理分析的更多相关文章
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...
- JS移动客户端--触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 移动端touch触屏滑动事件、滑动触屏事件监听!
一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...
- 第十一节:Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- jquery插件--ajaxfileupload.js上传文件原理分析
英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, u ...
- 移动终端学习2:触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
- JavaScript触屏滑动API介绍
随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...
随机推荐
- 《University Calculus》-chaper8-无穷序列和无穷级数-泰勒定理的证明
泰勒定理: 证明:
- lightoj 1018 dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1018 #include <cstdio> #include <cst ...
- 创建oracle 密码文件
orapwd file='$ORACLE_HOME/dbs/oratest' password=oracle entries=5 force=y; 说明:●FILE参数指定口令文件存放的全路径及文件名 ...
- 一些技术blog和安全blog
1.安全blog: http://zenxds.com/blog/ http://navisec.it/ http://huaidan.org/ http://leapar.lofter.com/ h ...
- bzoj1827 [Usaco2010 Mar]gather 奶牛大集会
不就是移一下树根,回溯一下吗? 诶?黄学长为什么可以直接找? 诶?这不是重心吗? YY了一下证明 很简单 由于重心max{sz[v]} <= sz[u] / 2的性质,可以证明每一步远离重心的移 ...
- HDU2255 奔小康赚大钱【二分图最佳匹配】
题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=2255 题目大意: 村里要分房子. 有N家老百姓,刚好有N间房子.考虑到每家都要有房住,每家必须分配 ...
- Qt 学习之路:模型-视图高级技术
PathView PathView是 QtQuick 中最强大的视图,同时也是最复杂的.PathView允许创建一种更灵活的视图.在这种视图中,数据项并不是方方正正,而是可以沿着任意路径布局.沿着同一 ...
- CakePHP的blog教程三
简单的身份验证和授权应用 接着我们blog教程的例子,如果我们想要建立一个根据登录的用户身份来决定其安全访问到正确的urls. 同时我们还有其他的需求: 允许我们的blog有多个作者,每一个作者都可以 ...
- 开源的Android开发框架-------PowerFramework使用心得(四)数据库管理DBFarmer
DBFarmer是PowerFramework数据库管理工具的集合. 可以进行对象的存储,添加了setter和getter的参数会被收录到数据库中,每个参数作为一个项,int类型的id或_id会被作为 ...
- PHP上传原理及应用
概要 1.FORM表现enctype属性 2.$_FILES系统函数 3.move_uploaded_file函数 4.is_uploaded_file函数 1.FORM标签的enctype属性 只有 ...