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. chrony时间同步 服务端 客户端 安装配置

    chrony时间同步 服务端 客户端 安装配置 原创内容http://www.cnblogs.com/elvi/p/7658021.html #!/bin/sh #运行环境 centos7 #chro ...

  2. Swarm 如何存储数据？- 每天5分钟玩转 Docker 容器技术（103）

    service 的容器副本会 scale up/down,会 failover,会在不同的主机上创建和销毁,这就引出一个问题,如果 service 有要管理的数据,那么这些数据应该如何存放呢? 选项一 ...

  3. 分布式版本控制系统 Git 教程

    简介 Git 是什么? Git 是一个开源的分布式版本控制系统. 什么是版本控制? 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 什么是分布式版本控制系统? 介绍分布 ...

  4. php 可逆加密方法

    可以逆转的加密类,没有密钥很难破解 [PHP]代码 <? class encryptCalss { var $key=12; function encode($txt){ for($i=0;$i ...

  5. ThreadLocal中的WeakReference

    在一般的网站开发中,基于Java的Web 框架都使用了ThreadLocal来存储一些全局的参数,在拦截器\Filter中设置变量,让变量可以在任意地方被获取. 一早就了解到里面有用到WeakRefe ...

  6. Vux配置指南

    流程 Vux是Vue.js的一个ui库,官网在这里,官方文档的配置指南侧重于技术的罗列,我这里简化一下Vux的配置流程. 1. 安装vux npm install vux --save 2. 安装le ...

  7. QScintilla 编译

    直接上英文了,不翻译了.看不懂的可以留言哈. ———————————————————————————————————————— Installation As supplied QScintilla ...

  8. Loadrunner 中时间戳函数 web_save_timestamp_param（时间返回数值）

    web_save_timestamp_param("tStamp", LAST); lr_output_message("Moon1:%s",lr_eval_s ...

  9. Tabhost中Activity绑定Service

    在android中,一个Activity绑定一个Service组件我们一般用Context().bindService方法就能够.可是假设这个 Activity属于一个Tabhost的话就不行了,在网 ...

  10. BIRT实现组内跨行计算

    问题来源:http://developer.actuate.com/community/forum/index.php?/topic/36160-dealing-with-previous-rows- ...