JS触摸与手势事件详解


Posted in Javascript onMay 09, 2017

本文为大家分享了JS触摸与手势事件,供大家参考,具体内容如下

1.触摸事件

包含 iOS 2.0 软件的 iPhone 3G 发布时,也包含了一个新版本的 Safari 浏览器。这款新的移动 Safari提供了一些与触摸(touch)操作相关的新事件。后来,Android 上的浏览器也实现了相同的事件。触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说,有以下几个触摸事件。

touchstart :当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove :当手指在屏幕上滑动时连续地触发。在这个事件发生期间,调用 preventDefault()可以阻止滚动。
touchend :当手指从屏幕上移开时触发。
touchcancel :当系统停止跟踪触摸时触发。关于此事件的确切触发时间,文档中没有明确说明。
以上的几个事件都是会冒泡的,也都可以取消。虽然这些触摸事件没有在DOM中定义,但让他们却是以兼容DOM的方式实现的。因此,每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey、metaKey。
除了常见的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
touches :表示当前跟踪的触摸操作的 Touch 对象的数组。
targetTouchs :特定于事件目标的 Touch 对象的数组。
changeTouches :表示自上次触摸以来发生了什么改变的 Touch 对象的数组。

每个Touch 对象包含下列属性

clientX :触摸目标在视口中的 x 坐标。
clientY :触摸目标在视口中的 y 坐标。
identifier :标识触摸的唯一 ID。
pageX :触摸目标在页面中的 x 坐标。
pageY :触摸目标在页面中的 y 坐标。
screenX :触摸目标在屏幕中的 x 坐标。
screenY :触摸目标在屏幕中的 y 坐标。
target :触摸的 DOM 节点目标。

使用这些属性可以跟踪用户对屏幕的触摸操作。来看下面的例子。

function handleTouchEvent(event){
//只跟踪一次触摸
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX +
"," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止滚动
output.innerHTML += "<br>Touch moved (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);

以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见,只会在有一次活动触摸操作的情况下输出信息。当 touchstart 事件发生时,会将触摸的位置信息输出到 <div> 元素中。当 touchmove 事件发生时,会取消其默认行为,阻止滚动(触摸移动的默认行为是滚动页面),然后输出触摸操作的变化信息。而 touchend 事件则会输出有关触摸操作的最终信息。注意,在 touchend 事件发生时, touches集合中就没有任何 Touch 对象了,因为不存在活动的触摸操作;此时,就必须转而使用 changeTouchs集合。

这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素时,这些事件(包括鼠标事件)发生的顺序如下:
(1) touchstart
(2) mouseover
(3) mousemove (一次)
(4) mousedown
(5) mouseup
(6) click
(7) touchend
支持触摸事件的浏览器包括 iOS 版 Safari、Android 版 WebKit、bada 版 Dolfin、OS6+中的 BlackBerryWebKit、Opera Mobile 10.1+和 LG 专有 OS 中的 Phantom浏览器。

2. 手势事件

iOS 2.0 中的 Safari 还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别介绍如下。

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

只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序,意味着两个手指必须同时位于该元素的范围之内,才能触发手势事件(这个元素就是目标)。由于这些事件冒泡,所以将事件处理程序放在文档上也可以处理所有手势事件。此时,事件的目标就是两个手指都位于其范围内的那个元素。

触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时,会触发 touchstart 事件。如果另一个手指又放在了屏幕上,则会先触发 gesturestart 事件,随后触发基于该手指的 touchstart事件。如果一个或两个手指在屏幕上滑动,将会触发 gesturechange 事件。但只要有一个手指移开,就会触发 gestureend 事件,紧接着又会触发基于该手指的 touchend 事件。
与触摸事件一样,每个手势事件的 event 对象都包含着标准的鼠标事件属性: bubbles 、cancelable 、 view 、 clientX 、 clientY 、 screenX 、 screenY 、 detail 、 altKey 、 shiftKey 、ctrlKey 和 metaKey 。此外,还包含两个额外的属性: rotation 和 scale 。其中, rotation 属性表示手指变化引起的旋转角度,负值表示逆时针旋转,正值表示顺时针旋转(该值从 0 开始)。而 scale属性表示两个手指间距离的变化情况(例如向内收缩会缩短距离);这个值从 1 开始,并随距离拉大而增长,随距离缩短而减小。

下面是使用手势事件的一个示例。

function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

与前面演示触摸事件的例子一样,这里的代码只是将每个事件都关联到同一个函数中,然后通过该函数输出每个事件的相关信息。

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

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jquery 插件学习(三)
Aug 06 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 #Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 #Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 #Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
JavaScrpt的面向对象全面解析
May 09 #Javascript
ES6正则表达式的一些新功能总结
May 09 #Javascript
Vuex和前端缓存的整合策略详解
May 09 #Javascript
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php静态文件生成类实例分析
2015/01/03 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
跳槽求职信范文
2014/05/26 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
雷锋的观后感
2015/06/10 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
HTML基础详解(下)
2021/10/16 HTML / CSS