javascript移动开发中touch触摸事件详解


Posted in Javascript onMarch 18, 2016

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!

  • W3C DOM把事件对象作为事件处理函数的第一个参数传入进去
  • IE将事件对象作为window对象的一个属性(相当于全局变量)

originalEvent对象

在一次偶然的使用中,我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined,打印e发现,它的事件对象不是原生的事件对象。经查阅发现它是jquery事件对象。

$(window).on("touchstart","body",function(e){
  console.log(e)
})

javascript移动开发中touch触摸事件详解

上面例子中event中有一个originalEvent属性,而这才是真正的touch事件。jQuery.Event 是一个构造函数,其创建一个可读写的jQuery事件对象,并在event 对象保留了对这个原生事件对象 event 的引用($event.originalEvent)。我们绑定的事件处理程序所处理的事件对象都是 $event。该方法也可以传递一个自定义事件的类型名,用于生成用户自定义事件对象。

touch事件

touchmove: 当手指在屏幕上滑动的时候连续地触发。
touchstart: 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchend: 当手指从屏幕上离开的时候触发。

TouchEvent对象

每一个touch事件的触发都会产生一个TouchEvent对象,以下是TouchEvent对象三个比较常用的重要属性

touches 当前位于屏幕上的所有手指的一个列表。
targetTouches 特定于事件目标的Touch对象的数组。[当前手指]
changeTouches 表示自上次触摸以来发生了什么改变的Touch对象的数组。

在这里,我用js写了一个touch事件,点击屏幕可触发,将其事件事件对象在控制台打印出,结果如下(箭头指向的是上述三个属性):

window.addEventListener("touchstart",function(event){
  console.log(event);
})

javascript移动开发中touch触摸事件详解

触摸事件对象属性

touches、targetTou、changeTouches都包含以下属性值

clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
还是上面的那个例子,changeTouches对象在控制台输出如下:

javascript移动开发中touch触摸事件详解

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js getElementsByTagName的简写方式
Jun 27 Javascript
JS定时关闭窗口的实例
May 22 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JS功能代码集锦
May 04 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 #Javascript
基于jQuery实现收缩展开功能
Mar 18 #Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 #Javascript
jQuery.deferred对象使用详解
Mar 18 #Javascript
JS中的二叉树遍历详解
Mar 18 #Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 #Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
js更优雅的兼容
2010/08/12 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
layui分页效果实现代码
2017/05/19 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
艺术学院毕业生自荐信
2014/07/05 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
郭明义电影观后感
2015/06/08 职场文书
导游词之张家口
2019/12/13 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android