<!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. jsp / get 中文乱码问题

    POST 方式下的解决方式还算简单,因为POST 方式下提交的数据都是以二进制的方式附加在http请求的body部分发送,只需要在后台指定编码格式就足矣解决. GET 方式下会将参数直接附加到url ...

  2. English trip -- VC(情景课)10 D Reading 阅读练习

    Read 阅读  From: Lupe To:Miriam Hi Miriam, I'm not working today.It's my day off. Are you busy?Come an ...

  3. 百度安卓SDK秘钥Key错误

    下载官方安卓地图demo,输入报名和sha1申请AK,发现key错误 构建的时候要指定生成的key 安卓定位BaiduLocDemo出现aapt.exe finished with non-zero ...

  4. H5基础知识（一）

    一.概述 HTML5  是html4.0 升级版 结构 Html5 .样式 css3 .行为: API  都有所增强 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web ...

  5. mysql timestamp的默认值

    当default 0,default '0000-00-00 00:00:00'都失效的时候,请尝试下 ALTER table `coupon_gift` add column `time_end` ...

  6. C# 中的时间（DataTime）

    在做报表或查询的时候,常常会预设一些可选的日期范围,如本周.本月.本年等,利用 C# 内置的DateTime基本上都可以实现这些功能. 当前时间: DateTime dt = DateTime.Now ...

  7. jquery插件Loadmask

    Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用. 它可实现的效果:

  8. js获得焦点和失去焦点那些事

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. LA3905

    题意: 给出n颗流星,第i颗在第T秒时飞到(xi+ai*t,yi+bi*t),给出一个矩形,问在某一时刻这个矩形中的流星数目最多有多少 题解: 首先计算出每一颗流星经过时间 然后左端点移动,计算出少了 ...

  10. spring aop 的理解

    spring aop的相关概念(所有的概念都是为了生成代理类这个过程所需要的信息的抽象): 1.Targer:目标对象.被代理的对象. 2.Advice:增强/通知.就是为目标对象扩展的功能.分为前置 ...