这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理。
水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情。iOS上设计了了一系列手势来模拟和扩展鼠标操作,比如手指放下后迅速提起会触发click事件,手指向上滑动,停止,会触发body的onscroll事件等等。但是,狭义的Gesture事件,也就是能够addEventListener的GestureEvent对象,却并不是一个非常强大的存在,它只在有两根或多根手指放在屏幕上的时候触发,并且只包含手指分开比例(scale)和手指转动角度(rotation)信息。对于其他各种常用的手势,我们必须利用别的事件来处理。
下面从单根手指的事件开始说起。。。
我们先来考虑一个最简单的手势,手指放下后迅速提起,这个手势做出来后会发生什么?大家当然会想到click,其实在click发生以前,还有很多事情发生,请看下图:
这里先解释一下什么是clickable element,就是一个绑定了click, mousedown, mouseup, mousemove事件
的任何html element(注意,没有绑定事件处理的element不算clickable element)。从这张图可以看出,手
指提起的一刹那,首先触发的并不是click事件,而是mouseover和mousemove。然后,系统会判断接收到事
件的element的内容是否被改变,如果内容被改变,接下来的事件都不会触发,如果没有改变,会按照
mousedown,mouseup,click的顺序触发事件。什么?你问mouseout在哪?这个事件的处理,比较尴尬,
上面说的一系列事件都完了以后,如果你再点击一个clickable element,就会触发上一个clickable element的
mouseout事件了。。。比较纠结,建议不要在多触版网页上使用mouseout。
那么,如果手指放下后不提起又会发生什么呢?什么都不会发生,没有任何事件会被触发。但是,如果对象
是一个img并且有alt属性的话,这个动作将会显示img的alt字符串。如果是一个link的话,这个动作会显示“在
新窗口打开连接”选项,但是,不会有任何用户定义事件触发。
最后一种关于单根手指的事件,是放下后滑动手指。注意,在滑动的过程当中,不会触发除touchmove以外
的任何事件(请不要试图在这时处理mousemove)。手指在滑动的时候,整个page应该会跟着移动,除非你
preventDefault了body的touchmove。当手指停下来后,page的onscroll将会触发。除此之外,没有什么我
们熟悉的事情会发生。
分享到:
相关推荐
Web 前端开发笔试考点 Web 前端开发是网站开发的重要组成部分,它涉及到网页的结构、表现和行为三个方面。为了确保网页的正确显示和良好的用户体验,Web 前端开发者需要遵循一系列标准,包括结构标准语言、表现标准...
这份作业合集适用于所有对网页设计、前端开发感兴趣的人,无论你是学生、初学者还是有一定经验的开发者。无论你是想学习新的技术,还是想了解一个完整的项目开发流程,这份资料都将为你提供极大的帮助。 使用建议:...
"一种基于多级并行处理器的高速实时手势识别及指尖轨迹追踪系统" 本文提出了一种基于多级并行处理器的高速实时手势识别及指尖轨迹追踪系统。该系统包含64×64处理单元(PE)阵列、64个简化精简指令集(RISC)构架的...
内含计算机图形学——基于MFC三维图形开发 孔令德版的课件以及第二章示例的完整源代码
微营销——指尖的利器 pdf电子书 传统营销和微营销
指尖上的美味——手机里不可或缺的美食APP推荐.pdf
简单自学web前端——切片-附件资源
——95后手机使用行为调研报告指尖上的生活人群定义:95后:95-99年出生,年龄16-19岁,初中/高中/职高/大学为主, 少部分工作90后:90-94年出生
包含 PC2002取模软件 PL2303安装使用教程 参考程序 单片机程序下载软件STC-LSP 各种串口模块驱动程序 上位改字工具 指尖陀螺组装说明 陀螺程序下载方法 陀螺电路图
压缩包里面包含两个记事本,分别为获取指尖数目、手势识别外文链接,里面都是本人硕士期间研究指尖识别过程中所涉及的内容,大部分从github上下载,把他们总结到一块,给研究手势识别的同学提供方便,可以进去打开看...
基于opencv+Mediapipe+CNN实现用手势识别控制对鼠标操控源码+项目说明+exe可执行程序.zip 鼠标操作 指尖移动来操控鼠标移动:通过手指的相对移动与移动的速度来操纵鼠标的移动 手势操控实现鼠标点击功能:通过...
手势指尖检测算法c++实现,使用肤色分割算法将手势从复杂背景中分离出来,通过检测手指指尖进行手指识别。
基于opencv+Mediapipe+CNN实现用手势识别控制对鼠标操控源码+使用说明+exe可执行程序功能简介 鼠标操作 指尖移动来操控鼠标移动:通过手指的相对移动与移动的速度来操纵鼠标的移动 手势操控实现鼠标点击功能:通过...
Leap Motion是最近推出的一款比较新颖的手部信息采集设备,它能够高精度、高帧率地跟踪捕获手部信息,基于此特性,本文阐述了一种基于指尖位置和方向信息进行手势提取和识别的研究方案。采用Leap Motion传感器进行...
基于轮廓的识别算法能够很好地处理手势的外观变化,但现有的识别算法在目标旋转和缩放时其识别率和鲁棒性较低,针对这一问题提出了一种基于指尖点和Hu不变矩的手势识别方法。该方法对基于曲率的指尖检测方法进行改进...
手势操控实现滚动页面:通过特定的手势实现页面的滚动 键盘操作 指尖操控虚拟键盘:用户可以通过手指点选虚拟键盘来进行输入 快捷手势操作 手势识别实现特定按键的触发:通过特定的手势触发某些按键的功能。 用户...
处理用户的手以检测指尖和手势_C++_C_下载.zip
移动端前端开发资料库 基于 mobileTech 上完善,感谢前期,后期名 筛选了一些基础知识和新的知识,去掉了一些老旧的方案.定期更新. 来自的一些移动端经验总结干货 本资料很多引用了指尖上的js系列,在此向作者表示...
手心在空间中运动形成的一系列二维坐标点作为手势的轨迹,再把相邻的坐标点 间的方向角量化后得到的方向向量作为动态手势的特征向量。其中,对于轨迹开 始和结束的判断,则是使用了指尖的个数作为依据:当指尖个数为...