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. java web 数据库开发1

    一个完整的数据库部署架构通常由客户端和服务器端两部分组成.客户端封装数据库请求将其发送给服务器端,服务器端执行完毕将其及结果返回给服务器端. 以mysql为例 介绍java应用程序对数据库的访问 JD ...

  2. 前端设计技巧——用 Promise 处理交互和异步

    本文仅表达前端的一些设计技巧,如果您在查阅js技术,请忽略此文! 前端开发经常会遇到这样的场景: 当满足一定条件时,需要弹出一个模态框,以便接收用户的输入.然后根据不同的输入,进行不用的操作. (ps ...

  3. springboot 获取hibernate 的 SessionFactory

    注入bean package cn.xiaojf; import cn.xiaojf.today.data.rdb.repository.RdbCommonRepositoryImpl; import ...

  4. 03 编译安装apache的简易配置

    1.监听端口,默认为80,在主配置文件 /etc/httpd24/httpd.conf中可以更改 2.持久连接 Include /etc/httpd24/extra/httpd-default.con ...

  5. Hadoop之WordCount详解

    花了好长时间查找资料理解.学习.总结 这应该是一篇比较全面的MapReduce之WordCount文章了 耐心看下去 1,创建本地文件 在hadoop-2.6.0文件夹下创建一个文件夹data,在其中 ...

  6. Java web中常见编码乱码问题(一)

    最近在看Java web中中文编码问题,特此记录下. 本文将会介绍常见编码方式和Java web中遇到中文乱码问题的常见解决方法: 一.常见编码方式: 1.ASCII 码 众所周知,这是最简单的编码. ...

  7. IIC协议学习笔记

    "移植"的重要性:并非所有的电路都得自己设计,到了一定阶段,"移植"也是一种学习能力.--CrazyBingo 转眼间期末又到了,最近开始了所谓的期末总预习,比 ...

  8. 在chrome下鼠标拖动层变文本形状的问题

    学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...

  9. blog界面自己写了css,参考了网站设计,想要的自己拿

    junhey这就把界面的代码公布下来,可以自己修改额~(ps:麻烦加个友链http://www.cnblogs.com/junhey/ 谢谢) /* 初始化样式 */ html, body, div, ...

  10. 用java实现简单快速的webservice客户端/数据采集器(支持soap1.1和soap1.2标准,支持utf-8编码)

    前言: 用了cxf,axis等各种wbeservice实现库,简单试用了一下动态调用的方式,很不满意,完全无法满足业务的需要,所以自己实现了一个webservice采集客户端,方便动态调用外部webs ...