<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
   <style type="text/css">
      .box{
         height: 600px;
         background: pink;
      }
   </style>
   <body>
      <div class="box"></div>
   </body>
   <script type="text/javascript">

      //0.获取元素

      var box = document.querySelector('.box');

      //1. 添加触摸开始事件

      box.addEventListener('touchstart',function(e){

         console.log('触摸开始')
         //console.log(e)

      })

      //2. 添加触摸移动事件

      box.addEventListener('touchmove',function(e){

         //2.1获取触摸点

         var ev = e.changedTouches[0];

         //console.log(ev)
         console.log('触摸移动'+ev.clientX+'=='+ev.clientY)

      })
      //3. 添加触摸取消事件

      box.addEventListener('touchcancel',function(){

         console.log('触摸意外取消')

      })
      //4. 添加触摸结束事件

      box.addEventListener('touchend',function(){

         console.log('触摸结束')

      })

      setTimeout(function(){
      // alert()
      },500)

   </script>
</html>

touch事件（寻找触摸点 e.changedTouches）的更多相关文章

  1. touch事件中的touches、targetTouches和changedTouches详解

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触 ...

  2. 移动的 touch事件中的touches、targetTouches和changedTouches

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触 ...

  3. ios-runtime拦截touch事件，展示用户触摸效果

    [展示效果说明] 对 app 操作录屏时,展示出手指在 app 上的触摸效果可以看到具体点击情况,感觉这样比较直观方便,也不用做视频后期了. 这里简单用 runtime 实现了一个这样的效果,不需要修 ...

  4. touch事件中的touches、targetTouches和changedTouches

    touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表; 通过一个例子来区分一下 ...

  5. 手机触摸touch事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

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

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

  7. 第六课 touch事件

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

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

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

  9. H5中的touch事件

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

随机推荐

  1. domContentload和onload

    defer和async <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚 ...

  2. Unity3D中人物模型的构成

    1.动画: 2.骨骼: 就是一些 Transform 组件,没有其他组件,它们会根据动画的要求而进行运动. 3.皮肤: 其上的 SkinnedMeshRenderer 关联了 网格.骨骼.材质 三个组 ...

  3. 雷林鹏分享：C# 接口（Interface）

    C# 接口(Interface) 接口定义了所有类继承接口时应遵循的语法合同.接口定义了语法合同 "是什么" 部分,派生类定义了语法合同 "怎么做" 部分. 接 ...

  4. hdu2845_最大不连续子段和

    ---恢复内容开始--- Beans Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. ~递归递归（FBI树--蓝桥）

    1220: FBI树 [递归] 时间限制: 1 Sec 内存限制: 128 MB 提交: 5 解决: 4 状态 题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串 ...

  6. 关于一些逗逼函数//atoi，itoa，strtok，strupr，

    reverse(begin,end)  反转容器内容可以是string,char数组,也可以是int型数组...用于反转其中的内容: char *   strtok(cahr *,const char ...

  7. _Python定义方法

    def 定义一个方法 在项目编程中,我们往往要做很多重复的事,比如一个排序的功能(当然Python中内置排序的方法),在编程中,我们肯定是会多次用到这个功能的,如果我们每次都在要用这个功能时,都去写一 ...

  8. 使用 istreambuf_iterator 读取文件内容，赋值给 std::string

    需要一个一个字符输入时考虑使用istreambuf_iterator 假设我们要把一个文本文件拷贝到一个字符串对象中.似乎可以用一种很有道理的方法完成: ifstream inputFile(&quo ...

  9. Lightbox JS v2.0图片切换效果

    代码下载

  10. Java——IO类，字符缓冲区

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...