<!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. dockfile杂项

    工程源代码+工程的配置文件 在外面配置好 1 工程的配置文件,是工程的一部分 2 要贯彻内聚原则, 用1句挂载整个工程. 在外面集中配置好在一个路径下,一起挂进去或者COPY进去. 防止先COPY了体 ...

  2. Linux中CentOS6.5 64位 系统下安装docker步骤

    CentOS6.5 64位    (docker目前仅支持64位)内核必须在3.10及以上 1. uname -r  查看内核版本 2. 升级内核到3.10版本(带aufs模块)    cd /etc ...

  3. 修改unity变量名但不丢失序列化值

    using UnityEngine; using UnityEngine.Serialization; public class LgsTest : MonoBehaviour { [Formerly ...

  4. android--------Dagger2介绍与简单使用（一）

    1:Dagger2是啥 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护的然后现在把这堆东西扔给Google维护了. 一般的I ...

  5. Android之ToolBar和自定义ToolBar实现沉浸式状态栏

    沉浸式状态栏确切的说应该叫做透明状态栏.一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明. 沉浸式状态栏是从android Kitkat(Android 4.4)开始出 ...

  6. 37mysql 表操作

    创建表 #语法: create table 表名( 字段名1 类型[(宽度) 约束条件], 字段名2 类型[(宽度) 约束条件], 字段名3 类型[(宽度) 约束条件] ); #注意: 1. 在同一张 ...

  7. CF1083B The Fair Nut and String

    题意 给出两个长度为n的01字符串S和T. 选出k个字典序在S和T之间的长度为n的01字符串,使得尽可能多的字符串满足其是所选字符串中至少一个串的前缀. 这是一道思路比较奇怪的类似计数dp的题. 首先 ...

  8. UVA-12186 Another Crisis （树状DP）

    题目大意:一家工厂,一个老板(编号为0),n个工人(编号1~n),其中,有的工人是中层领导,管辖一部分其他工人.现在大家要签署一份加薪申请书,但是按照规定不能越级上访,所以只能通过一层层的中间领导传到 ...

  9. JDBC连接SqlServer数据库（非默认实例）方法

    一般我们在连接数据库的时候都是用的默认实例名,今天遇到了用非默认是实例名:连接代码如下(Java): URL=jdbc:microsoft:sqlserver://192.168.1.85//DEMO ...

  10. 使用Bulk Binding批量绑定的模式高效处理ORACLE大量数据

           用批量绑定(bulk binding)的方式.当循环执行一个绑定变量的sql语句时候,在PL/SQL 和SQL引擎(engines)中,会发生大量的上下文切换(context switc ...