之前我们做过许多触屏的特效,那么,今天,我们来分析下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触屏原理分析的更多相关文章

  1. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  2. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  3. JS移动客户端--触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  4. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. 移动端touch触屏滑动事件、滑动触屏事件监听!

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  6. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  7. jquery插件--ajaxfileupload.js上传文件原理分析

    英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, u ...

  8. 移动终端学习2:触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  9. JavaScript触屏滑动API介绍

    随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...

随机推荐

  1. 自己生成非官方iPhone toolchain的头文件

    如果你已经搭建好非官方iPhone toolchain开发包,如果缺少某些头文件,可以用以下方法自己生成. 首先下载class-dump: http://www.codethecode.com/pro ...

  2. springmvc报错 org.springframework.web.servlet.DispatcherServlet

    在写springMVC时,导入所有需要的包后,运行程序,控制台报以下错误: 严重: Servlet [springDispatcherServlet] in web application [/Spr ...

  3. SQL Server阻止了对组件xp_cmdshell过程的解决方案 分类: SQL Server 2015-03-05 08:31 305人阅读 评论(0) 收藏

    SQL Server阻止了对组件xp_cmdshell过程的解决方案 错误描述:SQL Server阻止了对组件'xp_cmdshell'的过程'sys.xp_cmdshell'的访问.因为此组件已作 ...

  4. 构造Nginx避免直接使用IP通路Webserver

    他看上去非常Nginx构造,似乎忽略了ip直接访问Web问题,从理论上讲,这是不利于SEO优化,因此,我们希望能够避免直接使用IP访问该网站,但域名.详细介绍了如何做到这一点,看看下面的. 在官方文件 ...

  5. Android 颜色渲染(十) ComposeShader组合渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] Android 颜色处理(十) ComposeShader组合渲染 public ComposeShader(Shader sh ...

  6. java继承分析

    把java学完之后有開始了一遍突然发现对于继承还是不太理解所以就做了一个測试来分析一下 <span style="font-size:18px;">class A{ p ...

  7. tcp-backlog配置

    redis tcp-backlog配置   在redis2.8版本中有一个tcp-backlog配置, 说明如下: # TCP listen() backlog.## In high requests ...

  8. Spring 3 MVC: Themes In Spring-Tutorial With Example---reference

    Welcome to Part 6 of Spring 3.0 MVC Series. In previous article we saw how to add Internationalizati ...

  9. linux device driver —— ioctl

    实现了应用程序和设备驱动通过ioctl通信.还是对设备驱动没什么感觉,贴一下代码吧. 在Ubuntu 16.04 64bit中测试通过 ioctldemo.c #include <linux/m ...

  10. Java基础知识强化之集合框架笔记37:用户登录注册案例

    1. 登录注册案例分析图解: 2. 用户登录案例 详细分析 和 分包实现: (1)用户登录案例详细分析(面向对象思想) 按照如下的操作,可以让我们更符合面向对象思想: • 有哪些类呢?         ...