移动端 touch 事件的originalEvent
对于移动端的触摸事件,我们通过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
最新文章
- Spring-Batch CSV文件读取时的注意点
- C++学习笔记6:多文件编程
- apache配置网站目录的读写权限
- Oracle 11g详细安装配置教程
- 工具:七牛云备份VPS服务器文件
- 菜鸟学SSH(十八)——Hibernate动态模型+JRebel实现动态创建表
- Oracle数据库top10物理段
- JAVA中的栈和堆
- 每天一个Linux命令(06)--rmdir命令
- javascript 函数和作用域(闭包、作用域)(七)
- 解决asp.net MVC中 当前上下文中不存在名称“model” 的问题
- sql server 多行数据合并成一列
- 如何获取Debug Android Hash Key
- 常用的tcpdump操作
- 简单选择排序算法的C++实现
- vue day3 bootstrap 联动下拉
- python中configpraser模块
- 编程四剑客awk
- Windows下安装Python及Eclipse中配置PyDev插件
- php数组 组合排列 笛卡尔积
热门文章
- [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys
- Java泛型学习笔记 - (四)有界类型参数
- 利用netperf、iperf、mtr测试网络
- get方式提交中文乱码解决
- a标签的herf和click事件
- MySQL数据库9 - 日期与时间函数
- Android数据存储-读取内部存储空间数据
- php 使用 curl 发送 post 数据
- JAVA并发框架之Semaphore实现生产者与消费者模型
- 浅谈 HTTPS 和 SSL/TLS 协议的背景与基础