1、三个常用的移动端事件
  ontouchstart 手指按下时触发
  ontouchmove 手指移动时触发
  ontouchend 手动抬起时触发

  注意:这些事件当作事件属性使用时,不兼容谷歌浏览器。

  解决方案是,使用 addEventListener()来注册这些移动端事件。

2、pc端事件和移动端事件的区别
  1)通过 on的方式添加touch事件,在谷歌浏览器下无效。
  2)pc端的鼠标事件,用在移动端使用时,会产生300毫秒的延迟。

3、移动事件对象 TouchEvent

  TouchEvent对象,是一个标准事件对象,它默认是事件处理程序的第一个参数。它描述了touch事件发生时的详细信息。

  获取手指信息:
    touches 当前屏幕上的手指列表
    targetTouches 当前元素上的手指列表
    changedTouches 触发当前事件的手指列表

  获取手指的个数:

    e.changedTouches.length

  相关坐标的获取:
    e.pageX / e.pageY 手指触屏时到网页顶部/左侧的距离。
    e.clientX / e.clientY 手指触屏时到窗口上侧/左侧的距离。
    obj.offsetLeft / obj.offsetTop 对象到定位父级的left/top值。

  获取触屏时坐标:
    e.changedTouches[0].pageX / e.changedTouches[0].pageY

  三个手指对象的区别:
    在touchend时获取手指列表,只能用 changedTouches。原因是当手指抬起时,touches和targetTouches就没有了,所以只能用changedTouches来获取手指列表。


(未完待续)

移动端Touch事件基础的更多相关文章

  1. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  2. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  3. 移动端 touch 事件的originalEvent

    对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...

  4. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  5. 移动端touch事件 || 上拉加载更多

    前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...

  6. 移动端touch事件实现页面弹动--小插件

    动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...

  7. 移动端 Touch 事件

    在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...

  8. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  9. 移动端--touch事件与点透问题

    也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785

随机推荐

  1. OpenStack dashboard界面操作 实现登陆虚拟机并通信

    1.创建项目,点击"创建项目" (1).填写项目信息 (2).添加与之关联的项目成员 (3).点击"配额",为用户在平台上分配一个操作的空间,便于用户创建网络, ...

  2. 【charger battery 充電 充電器 電池】過充保護警告訊息 over charging protection,Battery over voltage protection, warning message

    Definition: over charging protection.battery over voltage protection, 是一種 battery 保護機制, 避免 battery 充 ...

  3. ajax传数组到后台,后台springmvc接收数组参数

    var   ids= new Array();  $("input[class='detailCheck']:checked").each(function(i,k){   var ...

  4. docker - win7下构建swarm nodes实现跨host的容器之间的通信

    前言 之前在Linux环境下尝试了swarm,通过将不同host以swarm nodes 的方式连接到一起(构建Overlay 子网),从而实现跨host的container通信. 今天我们就来说说如 ...

  5. .net 利用Emit将object转为DbParameter,DataTable转为List<>

    先放测试结果图,测试的方法是拷贝了老赵的一个简单的性能计数器:CodeTimer.发现速度还是比利用反射来获取快了2倍左右的,将object转为DbParameter的反射方法我没写.         ...

  6. 基于TF-IDF的新闻标签提取

    基于TF-IDF的新闻标签提取 1. 新闻标签 新闻标签是一条新闻的关键字,可以由编辑上传,或者通过机器提取.新闻标签的提取主要用于推荐系统中,所以,提取的准确性影响推荐系统的有效性.同时,对于将标签 ...

  7. JS语句

    JS语句包括: 1.顺序语句 2.分支语句:  if...else                   switch...case 3.循环语句 一.先看顺序语句: </body> < ...

  8. C++实现密码强度测试

    最近在博客中看到许多用js写的密码强度检测,我觉得挺有意思的,所以呢我打算自己也写个来玩玩,最可悲的是我还没学js,当然这不重要,所以呢打算用C++来写一个密码强度检测,这里我来给大家说说用JS写的和 ...

  9. Jmeter-WINDOWS下的配置部署

    前提:已配置安装JDK环境及已部署TOMCAT. 解压apache-jmeter-2.9.zip文件至目录,我的是D:\Program Files目录. 点击我的电脑----属性----高级----环 ...

  10. 关于java中使用数组的几点理解笔记

    1.数组元素就是变量: 2.在已有数据类型之后加方括号[],就会产生一个新的数组类型: 分两类:1)基本数据类型,如:int[],string[]; 2)引用数据类型,如:Person[](类): 3 ...