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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
浅析js封装和作用域
Jul 09 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
学习Angularjs分页指令
Jul 01 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
python模拟事件触发机制详解
2018/01/19 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
详解Python sys.argv使用方法
2019/05/10 Python
python异常处理和日志处理方式
2019/12/24 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
文明风采获奖感言
2014/02/18 职场文书
《木笛》教学反思
2014/03/01 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android