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. 使用Navicat导入.csv文件（过程和注意点）

    1.创建一个数据库,右键点击表,选择导入向导. 2.在跳出的弹窗中选择.CSV文件,点击下一步 3.选择文件来源和编码规格,点击下一步 如果发现上传后中文出现乱码请使用10008这个编码规则 4.选择 ...

  2. upload 简单的封装

    upload 最简单的封装类 <?php    class Upload{        public function Up($files){            if($files['na ...

  3. Linux 编程--三种常用的定时器

    这节我们来探讨一下linux开发过程中常用的定时器,尤其在网络编程中被常常用到如heartbeat,断线重连等等.这里提供了三种定时器的方案,分别是链表形式的计时器,环型计时器,最小堆计时器.每个都有 ...

  4. Protocol Buffer序列化对比Java序列化.

    初识 Protocol Buff是谷歌推出的一种序列化协议. 而Java序列化协议也是一种协议. 两者的目的是, 将对象序列化成字节数组, 或者说是二进制数据, 那么他们之间有什么差异呢. proto ...

  5. linux下yum安装redis以及使用

    1.yum install redis      --查看是否有redis   yum 源 2.yum install epel-release    --下载fedora的epel仓库 3. yum ...

  6. SpringData 基于SpringBoot快速入门

    SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战 ...

  7. 如何用shell脚本取出服务器图片

    一 ,SHELL 是什么 (1)shell是一种命令行解释器. (2)是用户和Linux内核之间沟通的桥梁,属于中间件.见下图 (3)交互流程:shell接受用户输入的指令 =>将指令传达给Li ...

  8. 多版本VisualStudio导致的.net版本问题

      写在前面:本博文是在我现有知识状态下写的, 我现在是小白, 有错误欢迎指正. 以后假如接触到更合理的见解, 我一定会修正这篇博文的. 本文原是在我本地笔记中待着的, 写于2016/05/17. 下 ...

  9. js----数组处理之splice（有js原始addClass方法哦）

    上次写了一个轮播的方法:http://blog.csdn.net/stronglyh/article/details/46833499 由于别人问我的时候,给了我html.于是乎我就看到了页面中引用了 ...

  10. orale 查询每年、每月、每日统计量的sql语句

    每年 select to_char(createtime, 'YYYY') 年, count(*) from table  group by to_char(createtime, 'YYYY'); ...