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 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP header函数分析详解
2011/08/06 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
详解vue-cli3使用
2018/08/14 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
Python通过future处理并发问题
2017/10/17 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python 实现单通道转3通道
2019/12/03 Python
解释下面关于J2EE的名词
2013/11/15 面试题
超市5.1促销活动
2014/01/15 职场文书
科级干部考察材料
2014/02/15 职场文书
食品安全处置方案
2014/06/14 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
如何利用python实现Simhash算法
2022/06/28 Python