十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

JS手势事件中gesturestart、gesturechange、gestureend事件应用方法及开发实例

百恒网络 2017-01-09 1522

前面我们介绍了移动端的触摸事件,其中有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 开始,并随距离拉大而 增长,随距离缩短而减小。 下面是使用手势事件的一个示例。 
<!DOCTYPE html>
<html>
<head>
       <title>Gesture Events Example</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
       <p>Touch anywhere on the screen with two fingers. This only works on an iPhone or iPod Touch running iPhone 2.x software.</p>
<div id="output"> 
</div>
<script type="text/javascript">
       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);
</script>
</body>
</html>

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

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

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×