<!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. Spark与Flink大数据处理引擎对比分析！

    大数据技术正飞速地发展着,催生出一代又一代快速便捷的大数据处理引擎,无论是Hadoop.Storm,还是后来的Spark.Flink.然而,毕竟没有哪一个框架可以完全支持所有的应用场景,也就说明不可能 ...

  2. 【Golang】 可以自动生成测试用例的库--gotests

    简介 gotests是一个Golang命令行工具,它可以使编写Go的测试代码变得容易.它能基于目标源文件的函数和方法生成数据驱动测试用例,并且在此过程会自动导入任何依赖. 下面是gotests在使用S ...

  3. Codeforces 862B - Mahmoud and Ehab and the bipartiteness

    862B - Mahmoud and Ehab and the bipartiteness 思路:先染色,然后找一种颜色dfs遍历每一个点求答案. 代码: #include<bits/stdc+ ...

  4. C# Interface中的属性

    只能写get,和set,到具体类实现的时候才确定get的是哪个字段的值,set的是哪个字段的值.

  5. C++ 多态性和虚函数

    2017-06-27 19:17:52 C++面向对象编程的一个重要的特性就是多态性,而多态性的实现需要依赖虚函数的帮助. 一.多态的作用: 隐藏实现细节,使得代码能够模块化: 接口重用,实现“一个接 ...

  6. linux编译安装mysql5.1.x

    安装mysql,安装前准备 如果mysql用户不存在,那么添加mysql用户 groupadd mysql useradd -g mysql mysql mysql编译安装 make时间特别长 wge ...

  7. python-day3笔记

    1.通信是软件(计算机)与软件(计算机)之间的通信 2.网络指的是: 一:计算机与计算机之间通过物理连接介质(网络设备)连接到一起:光纤--物理连接介质,和网线一样. 二:计算机与计算机之间基于网络协 ...

  8. 悟空CRM框架下载模板

    1.你可以把你要下载的模板放在这个项目的Public/excelmodel目录下,然后你就可以在页面中编写代码 你可以在下载按钮这里编写:onclick="window.location.h ...

  9. javassist示例

    javassist的作用是动态生成字节码. package com.zhang; class Fighter {} public class Assist_Test { public static v ...

  10. CAS-认证流程

    从结构上看cas包括两个部分,CAS server 和CAS client 需要独立部署,主要负责用户的认证工作,CAS负责处理对客户端受保护资源的访问请求,需要登录时,重新定向到CAS Server ...