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 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
Vue中props的详解
May 16 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
js实现div色块碰撞
Jan 16 Javascript
vue中实现回车键登录功能
Feb 19 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
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP静态文件生成类实例
2014/11/29 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python中的字典详细介绍
2014/09/18 Python
Python脚本实现格式化css文件
2015/04/08 Python
Python中用于计算对数的log()方法
2015/05/15 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Django框架模板介绍
2019/01/15 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
物流管理专业职业生涯规划书
2014/01/06 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
公休请假条
2014/04/11 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
大学生入党群众意见书
2015/06/02 职场文书
观后感格式
2015/06/19 职场文书