<!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. 2018年全国多校算法寒假训练营练习比赛（第一场）E 恋与程序员

    https://www.nowcoder.com/acm/contest/67/E 思路: dfs 代码: #include<bits/stdc++.h> using namespace ...

  2. arcgis for silverlight 地图放大到某个点或者几何对象

    http://blog.csdn.net/xuan444150/article/details/7727866   分类: silverlight王国 GIS王国 2012-07-09 08:50 1 ...

  3. Mysql查询用逗号分隔的字段-字符串函数FIND_IN_SET()，以及此函数与in()函数的区别

    查询用逗号分隔的字段,可以用字符串函数FIND_IN_SET(): 查询数据库表中某个字段(值分行显示),可以用函数in(). 今天工作中遇到一个问题,就是用FIND_IN_SET()函数解决的. 第 ...

  4. hdu多校(二) 1004 1007 1010

    Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. DATEADD 和 CAST 函数

    where cast(soh.orderdate as date)=cast(dateadd(day,-1,getdate()) as date) 这一代码在sql 2005 不适用,使用conver ...

  6. Oracle12c中性能优化&amp;功能增强新特性之重大突破——内存列存储新特性

    内存列存储(IM column store) 是Oracle12.1.0.2版本的主要特点.该特点允许列,表,分区和物化视图在内存中以列格式存储,而不是通常的行格式.数据存在内存中的好处显而易见,而列 ...

  7. vue2.0对不同数据类型的显示

  8. Unicode与UTF-8，UTF-16

    Unicode(UTF-8, UTF-16)令人混淆的概念 为啥需要Unicode 我们知道计算机其实挺笨的,它只认识0101这样的字符串,当然了我们看这样的01串时肯定会比较头晕的,所以很多时候为了 ...

  9. PHP:第三章——PHP中的回调函数

    <?php header("Content-Type:text/html;charset=utf-8"); //回调函数 //计算两个数只和 function Add($a, ...

  10. PHP:第一章——PHP中的位运算

    //位运算: /*$a & $b;//And(按位与).$a和$b都为1的被设为1: $a | $b;//(按位或).$a和$b任何一个为1的位被设为1 $a ^ $b;//Xor(按位异或) ...