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. C#在自定义事件里传递自定义数据,使用EventArgs的姿势

    EventArgs是包含事件数据的类的基类,用于传递事件的细节.今天分享的是使用泛型来约束EventArgs,在事件里传递自定义数据的例子. 正题 由于这个关注点很小,直接上代码了. 定义泛型类TEv ...

  2. 数据库sql语句总结

    1) select 字段名 from 表名 group by 字段名(或是多个字段名,中间用逗号隔开) having count(*)>1:查询表中某一(某几个)字段内的重复数据 Oracle: ...

  3. SketchMaster 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  4. How to get table pg_stat_user_functions.

    修改配置文件postgres.conf track_functions = all                   # none, pl, all 或者 在当前事物中设置 postgres=# s ...

  5. NGUI_概述

    序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的. 希望大家可以见谅,希望大佬多多指教. 一.什么是NGUI: NGUI是严格遵循KISS原则并用C#编写的 ...

  6. 迭代加深搜索POJ 3134 Power Calculus

    题意:输入正整数n(1<=n<=1000),问最少需要几次乘除法可以从x得到x的n次方,计算过程中x的指数要求是正的. 题解:这道题,他的结果是由1经过n次加减得到的,所以最先想到的就是暴 ...

  7. 【Struts2的执行流程，这个博主写的很详细】

    http://blog.csdn.net/wjw0130/article/details/46371847

  8. 自动化运维工具——puppet详解（二）

    一.class 类 1)什么是类? 类是puppet中命名的代码模块,常用于定义一组通用目标的资源,可在puppet全局调用: 类可以被继承,也可以包含子类: 具体定义的语法如下: class NAM ...

  9. 编译器 STVD 与 IAR 的差别 个人体验

    编译器 STVD 与 IAR 的一些差别,这些事个人的体验,欢迎扔砖和指点或者补充. 1:全局查找功能: STVD:全局查找功能全局查找功能比較麻烦.有3个动作. IAR:有全局查找功能比較方便.仅仅 ...

  10. 第03章-VTK系统概述（1）

    [译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年,ISBN: 978-1-930934- ...