移动端 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
移动端 touch 事件的originalEvent的更多相关文章
- H5案例分享:移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
- 移动端Touch事件基础
1.三个常用的移动端事件 ontouchstart 手指按下时触发 ontouchmove 手指移动时触发 ontouchend 手动抬起时触发 注意:这些事件当作事件属性使用时,不兼容谷歌浏览器. ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- 移动端touch事件实现页面弹动--小插件
动手之前的打盹 说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的 ...
- 移动端 Touch 事件
在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等.常用的触摸事件有touchstart,touchmove,touchend. 每个事件包含下面三个用于跟踪虎摸的属性: touche ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- 移动端--touch事件与点透问题
也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785
随机推荐
- Java 设计模式学习
看完headfirst设计模式,简单总结一下. 写在最前面:设计模式的关心的问题为"弹性.易于维护.易于扩展",通过对模式的应用,让自己的代码能够得到良好的可塑性.但是个人认为不能 ...
- 7月10日——[HouseStark] 扬帆起航--第一次会议
本次会议为小组成员第一次会议 内容:每个成员提出一个及以上的项目及内容,成员内部商议并投票决定要做的项目 会议时长:90分钟 地点:电三楼8楼816室 成员 项目 讨论结果 崔文祥 高校就业信息汇总网 ...
- mysql,node.js
var mysql = require('mysql'); var pool = mysql.createPool({ host: 'localhost', user: 'root', passwor ...
- iOS---初识Swift(一)
一.Swift简介 ○ 2010年的夏天, 苹果公司的开发人员Chris Latten接到了一个特别的任务, 为OS X 和iOS平台开发下一代编程语言, 也就是Swift. ○ 苹果公司于2014年 ...
- 如何修复Outlook 2007源文件.PST及性能优化补丁
kb961752 微软发布了改善 Outlook 2007 个人数据文件性能的补丁,该补丁未来将会集成于 SP2 中,但是现在对于SP1用户可以提前得到它. 获取地址: http://suppor ...
- yum只下载不安装:yumdownloader
如果只想通过yum下载软件的安装包,但是不需要进行安装的话,可以使用 yumdownloader 命令. yumdownloader 命令在软件包 yum-utils 里面. 先安装 yum-util ...
- firefox vimperator插件
firefox vimperator插件实在是强大,最喜欢的几个功能做个笔记. 如何复制网页上的文字:c进入caret模式,定位cursor到要复制的开始位置--v进入visual模式,用hjkl键选 ...
- SharePoint 2013 中的 PowerPoint Automation Services
简介 许多大型和小型企业都将其 Microsoft SharePoint Server 库用作 Microsoft PowerPoint 演示文稿的存储库.所有这些企业在 ...
- Reverse-Daily(5)-RE_100
比较简单的一道题目,主要注意方法一 链接:http://pan.baidu.com/s/1c1U8a4K 密码:cnkq 我用了两种方法 方法一: nop掉几处无关的call指令,然后直接运行程序,但 ...
- (转)iOS安全 对本地文件的保护
开篇先扯几句题外话,许多朋友都问我怎么不写防啊,我确实有点犹豫.hackers总是想象如果自己是开发者会怎么写,然后才能找到入手点.同理,开发者们也要想象自己是hackers会怎么做,才能采取相应的防 ...