JS触摸事件、手势事件详解


Posted in Javascript onMay 04, 2017

触屏已经是我们身边电子设备的常态了。触摸事件当然也是随着触屏的出现,用户使用最多的事件啦!
难道使用触屏事件后,其他原来的鼠标事件就都不能用啦?当然不是,只不过不是那么好用啊。

针对鼠标事件,有哪些不适应?

dbclick

触屏设备不支持双击事件。双击浏览器窗口,会放大画面。

可以通过在head标签内加上这么一行:

<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

可以实现,我们编写的页面不会随着用的手势而放大缩小。

关于meta标签,我还没有研究过,罪过啊。

mouse

在触屏上,我们单击一个元素,会相应的触发:mousemove mousedown mouseup click,所以当我们编写移动客户端界面时,可以为元素直接添加move事件,可以提高效率。

同时也会触发mouseovermouseout,测试结果,我发现,只有当页面第一次刷新时,单击元素,参会触发mouseover事件。

随着触屏移动端设备的普及使用,W3C开始制定TouchEvent规范。

触摸事件

该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。具体来说有以下几个触摸事件。
1、touchstart

当手指放在屏幕上触发。

2、touchmove

当手指在屏幕上滑动时,连续地触发。

3、touchend

当手指从屏幕上离开时触发。

4、touchcancel

当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。

【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。

由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动。

除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
1、touches:表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时,event.touches.length=1,

当两个手指在触屏上时,event.touches.length=2,以此类推。
2、targetTouches:特定于事件目标的touch对象数组。

因为touch事件是会冒泡的,所以利用这个属性指出目标对象。

3、changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。

每个touch对象都包含下列几个属性:
4、clientX:触摸目标在视口中的x坐标。

clientY:触摸目标在视口中的y坐标。

identifier:标识触摸的唯一ID。

pageX:触摸目标在页面中的x坐标。

pageY:触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

target:触摸的DOM节点目标。

【如何使用呢?】

EventUtil.addHandler(div,"touchstart",function(event){
    div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;
  });
  EventUtil.addHandler(div,"touchmove",function(event){
    event.preventDefault();
    div.innerHTML=event.touches[0].clientX;
  });
  EventUtil.addHandler(div,"touchend",function(event){
    div.innerHTML=event.changedTouches[0].clientY;
  });

使用clientX……时,必须要指明具体的touch对象,而不要直接指明数组。

event.touches[0]

touchend事件处理函数中,当该事件发生时,touches里面已经没有任何的touch对象了,此时,就要使用changeTouches集合。

手势事件

  1. gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。
  2. gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
  3. gestureend:当任何一个手指从屏幕上面移开时触发。

【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。

触摸事件与手势事件之间的关系

1、当一个手指放在屏幕上时,会触发touchstart事件,如果另一个手指又放在了屏幕上,则会触发gesturestart事件,随后触发基于该手指的touchstart事件。

2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,则会触发gestureend事件,紧接着又会触发toucheend事件。

手势的专有属性

  1. rotation:表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从零开始。
  2. scale:表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
vue-cli设置publicPath小记
Apr 14 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
详解Angular 4.x Injector
May 04 #Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 #Javascript
详解Node.js串行化流程控制
May 04 #Javascript
纯原生js实现贪吃蛇游戏
Apr 16 #Javascript
js调用刷新界面的几种方式
May 03 #Javascript
JavaScript中双向数据绑定详解
May 03 #Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 #Javascript
You might like
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python将string转换到float的实例方法
2019/07/29 Python
django中嵌套的try-except实例
2020/05/21 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
python 如何设置守护进程
2020/10/29 Python
小学阳光体育活动总结
2014/07/05 职场文书
音乐学专业求职信
2014/07/22 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书