对于移动端的触摸事件,我们通过touchstart、touchmove、touchend实现,PC端一般使用mousedown、mousemove、mouseup实现。

  我们获取事件坐标,原生js获取方式

mousedown event.pageX
mousemove event.pageX
mouseup event.pageX
touchstart event.touches[0].pageX  &  event.changedTouches[0].pageX  &  event.targetTouches[0].pageX
touchmove event.touches[0].pageX  &  event.changedTouches[0].pageX  &  event.targetTouches[0].pageX
touchend event.touches[0].pageX  &  event.changedTouches[0].pageX  &  event.targetTouches[0].pageX

  jQuery获取方式

mousedown event.pageX
mousemove event.pageX
mouseup event.pageX
touchstart event.originalEvent.touches[0].pageX  &  event.originalEvent.changedTouches[0].pageX  &  event.originalEvent.targetTouches[0].pageX
touchmove event.originalEvent.touches[0].pageX  &  event.originalEvent.changedTouches[0].pageX  &  event.originalEvent.targetTouches[0].pageX
touchend event.originalEvent.changedTouches[0].pageX  &  event.originalEvent.targetTouches[0].pageX

  其中关于touch触摸事件的触摸列表:

    touches :当前位于屏幕上的所有手指的一个列表。
    targetTouches :位于当前DOM元素上的手指的一个列表。
    changedTouches :涉及当前事件的手指的一个列表。

  对于jQuery中在移动端获取坐标使用的event.originalEvent,有以下:

  It's also important to note that the event object contains a property called originalEvent, which is the event object that the browser itself created. jQuery wraps this native event object with some useful methods and properties, but in some instances, you'll need to access the original event via event.originalEvent for instance. This is especially useful for touch events on mobile devices and tablets.

  event.originalEvent is usually just the native event (also described here).

  However, if the browser is compatible, and the event was a touch event then that API will be exposed through event.originalEvent.

  The short answer is that event.originalEvent is not always the same, it depends on which event type triggered the handler, and on the environment of the browser.

  关于event.originalEvent说明的地址链接:http://stackoverflow.com/questions/16674963/event-originalevent-jquery

  关于touch事件的补充内容地址链接:http://blog.csdn.net/clh604/article/details/9861411

最新文章

  1. Spring-Batch CSV文件读取时的注意点
  2. C++学习笔记6:多文件编程
  3. apache配置网站目录的读写权限
  4. Oracle 11g详细安装配置教程
  5. 工具:七牛云备份VPS服务器文件
  6. 菜鸟学SSH(十八)——Hibernate动态模型+JRebel实现动态创建表
  7. Oracle数据库top10物理段
  8. JAVA中的栈和堆
  9. 每天一个Linux命令(06)--rmdir命令
  10. javascript 函数和作用域(闭包、作用域)(七)
  11. 解决asp.net MVC中 当前上下文中不存在名称“model” 的问题
  12. sql server 多行数据合并成一列
  13. 如何获取Debug Android Hash Key
  14. 常用的tcpdump操作
  15. 简单选择排序算法的C++实现
  16. vue day3 bootstrap 联动下拉
  17. python中configpraser模块
  18. 编程四剑客awk
  19. Windows下安装Python及Eclipse中配置PyDev插件
  20. php数组 组合排列 笛卡尔积

热门文章

  1. [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys
  2. Java泛型学习笔记 - (四)有界类型参数
  3. 利用netperf、iperf、mtr测试网络
  4. get方式提交中文乱码解决
  5. a标签的herf和click事件
  6. MySQL数据库9 - 日期与时间函数
  7. Android数据存储-读取内部存储空间数据
  8. php 使用 curl 发送 post 数据
  9. JAVA并发框架之Semaphore实现生产者与消费者模型
  10. 浅谈 HTTPS 和 SSL/TLS 协议的背景与基础