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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
使用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输出时间格式
2013/08/31 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
用ADODB.Stream转换
2007/01/22 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
酒店个人求职信范文
2014/01/25 职场文书
研发工程师岗位职责
2014/04/28 职场文书
火烧圆明园观后感
2015/06/03 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python