JS手势事件中gesturestart、gesturechange、gestureend事件

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

前面我们介绍了移动端的触摸事件，其中有touchstar、touchmove、touchend、touchcancel,同时还有相关三个用于跟踪触摸属性,分别为touches、targetTouchs、changeTouches，因为触摸事件和手势事件两者是相辅相成的,若对触摸事件不太熟悉,可以点击《触摸事件中touchstar、touchmove、touchend、touchcancel事件应用方法及实例》再看下.接下由南昌网站制作公司网络前端开发工程师向大介绍在移动端的手势事件。
? ? ? 只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意 味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事 件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都 位于其范围内的那个元素。?
? ? ? ?触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发 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 开始，并随距离拉大而 增长，随距离缩短而减小。 下面是使用手势事件的一个示例。?



? ? ? ?



? ? ? ?

Touch anywhere on the screen with two fingers. This only works on an iPhone or iPod Touch running iPhone 2.x software.

? ? ? ?与前面演示触摸事件的例子一样，这里的代码只是将每个事件都关联到同一个函数中，然后通过该 函数输出每个事件的相关信息。?
? ? ? ?触摸事件也会返回 rotation 和 scale 属性，但这两个属性只会在两个手指与 屏幕保持接触时才会发生变化。一般来说，使用基于两个手指的手势事件，要比管理 触摸事件中的所有交互要容易得多。?

? 本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-网络http://www.huicuiwang.cn/如转载请注明出处!