js的touch事件，一般用于移动端的触屏滑动:
$(function(){
　　document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);
}

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

简单应用案例：

 <body>

         <span id="test_box" style="position:fixed;left:0px;top:0px;background-color:gainsboro;padding:15px;">123</span>

         <script>

 //            addEventListener() 方法用于向指定元素添加事件句柄。           使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

             //document.addEventListener("touchstart",touch_start,false);

             //document.addEventListener("touchmove",touch_move,false);

             //document.addEventListener("touchend",touch_end,false);

             //document.addEventListener("touchcancel",touch_cancel,false);

             function touch_start(event){

                 alert("touch_start : 当手指触摸屏幕时触发")

             }

             function touch_move(event){

                 alert("touchmove : 当手指在屏幕上滑动时连续的触发。")

             }

             function touch_end(event){

                 alert("touchend : 当手指从屏幕上移开时触发")

             }

             function touch_cancel(event){

                 alert("touchcancel : 当系统停止跟踪触摸时触发。")

             }

             //应用示例，单个手指拖动盒子

             var obj = document.getElementById("test_box");

              obj.addEventListener('touchmove', function(event)

              { // 如果这个元素的位置内只有一个手指的话

                 if (event.targetTouches.length == 1)

                      {

                       var touch = event.targetTouches[0];

                        // 把元素放在手指所在的位置

                        obj.style.left = touch.pageX + 'px';

                          obj.style.top = touch.pageY + 'px';

                       }

             }, false);

         </script>

     </body>

touch事件应用的更多相关文章

  1. UC浏览器中touch事件的异常记录

    以前也在UC上面栽过几个坑,不过都是页面显示方面的.上个周的时候,商品详情页重做,要添加个上拉显示详情的效果. 有两个条件需要判断: 1.是否到达底部: 2.到达底部之后拖动的y轴距离. 效果写完后, ...

  2. 移动端开发概览【webview和touch事件】

    作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...

  3. 手持设备点击响应速度，鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  4. 第六课 touch事件

    1.移动端页面在PC上浏览时,限制宽度的方法: 2.移动端页面切换设备时自动刷新页面的方法: 3.touch事件 touchstart:当手指触摸屏幕时触发.通过addEventListener添加移 ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. js的touch事件的实际引用

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  7. H5中的touch事件

    touch中共有touchstart.touchmove和touchend三个事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结 ...

  8. javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 ta ...

  9. Android Touch事件传递机制 二：单纯的（伪生命周期）

    转载于:http://blog.csdn.net/yuanzeyao/article/details/38025165 在前一篇文章中,我主要讲解了Android源码中的Touch事件的传递过程,现在 ...

  10. Android Touch事件传递机制 一： OnTouch，OnItemClick（监听器），dispatchTouchEvent（伪生命周期）

      ViewGroup View  Activity dispatchTouchEvent 有 有 有 onInterceptTouchEvent 有 无 无 onTouchEvent 有 有 有 例 ...

随机推荐

  1. python并发编程之多线程一

    一,什么是线程 线程也被称为轻量进程计算机科学术语,指运行中的程序的调度单位. 线程是进程中的实体,一个进程可以拥有多个线程,一个线程必须有一个父进程.线程不拥有系统资源,只有运行必须的一些数据结构: ...

  2. PHPstorm 如何新增项目

    如何在PHPstorm新增项目 1.打开设置 2.找到Directories ,点击增加路径

  3. 大白话Vue源码系列(02)：编译器初探

    阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...

  4. mysql数据库插入数据获取自增主键的三种方式（jdbc PreparedStatement方式、mybatis useGeneratedKeys方式、mybatis selectKey方式）

    通常来说对于mysql数据库插入数据获取主键的方法是采用selectKey的方式,特别是当你持久层使用mybatis框架的时候. 本文除此之外介绍其它两种获取主键的方式. 为了方便描述我们先建一张my ...

  5. IE CSS Bugs 列表和解决方法

    我们在开发中我们常会在IE中遇到很多莫名的bug,尤其是老态龙钟的IE6浏览器.为了提高我们的开发效率,需要经常总结,整理工作中遇到的问题.我们在网络上找到的IE Bugs 资料是零散的.不过,在老外 ...

  6. Effective Java 第三版——3. 使用私有构造方法或枚类实现Singleton属性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  7. 单源最短路径 dijkstra算法实现

    本文记录一下dijkstra算法的实现,图用邻接矩阵表示,假设图为无向图.而且连通,有向图,不连通图的做法相似. 算法简述: 首先确定"单源"的源.假设是第0个顶点. 维护三个数组 ...

  8. vim 命令整理（自己经常使用）

    vimm(vimsual)是Linux/UNIX系列OS中通用的全屏编辑器. vimm分为两种状态,即命令状态和编辑状态.在命令状态下.所键入的字符系统均作命令来处理.如:q代表退出,而编辑状态则是用 ...

  9. 刚在在win8.1下装了ubuntu12.04

    这是一个開始. 開始我想在win7下,由于我本来是7和win8.1双系统,想直接把win7覆盖了. 可是不知道怎么回事,比較复杂.于是在win8.1下装了. 先把win7的系统盘格式化了. 把下的is ...

  10. Unity打包android的apk与数据包.obb分离和apk签名

    那么,通过以上图片.我相信大多数人已经知道怎么创建了,apk签名比較简单,假设之前没有签名文件.那么选择图中的Create New Keystore然后在以下两个password框中输入passwor ...