zoukankan      html  css  js  c++  java
  • 指尖下的js —— 多触式web前端开发之三:处理复杂手势(转)

     这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异)。这个
    事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,
    gestureend三个事件回调: 

    gesturestart    // 当有两根或多根手指放到屏幕上的时候触发
    gesturechange    // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发
    gestureend    // 当倒数第二根手指提起的时候触发,结束gesture


        事件处理函数中会得到一个GestureEvent类型的参数,它包含了手指的scale(两根移动过程中分开的比例
    )信息和rotation(两根手指间连线转动的角度)信息。 
        当两根或以上的手指在屏幕上活动的时候,我们可以做出一些较为复杂的手势。这将涉及到普通的mouse事
    件,touch事件和gesture事件,情况比较复杂。touch已经在第一篇文章里详细介绍,这里就简单带过。 
        我们还是先看看当分别将两根手指放到屏幕上的时候,会触发哪些事件吧: 
    1、第一根手指放下,触发touchstart,除此之外什么都不会发生(请参照第二篇文章,手指提起才会触发
    mouse的各事件) 
    2、第二根手指放下,触发gesturestart 
    3、触发第二根手指的touchstart 
    4、立即触发gesturechange 
    5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样 
    6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange 
    7、触发第二根手指的touchend 
    8、触发touchstart!注意,和第一篇文章里介绍的一样,多根手指在屏幕上,提起一根,会刷新一次全局
    touch!重新触发第一根手指的touchstart,这点和苹果官方网站上介绍的不同。 
    9、提起第一根手指,触发touchend 
        Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
    做一些事情: 

    var angle = event.rotation;
    var scale = event.scale;


        这样能够取得scale和rotation信息,然后我们可以: 

    e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation +
    startRotation + 'deg)';


        这段代码能让element随着你的两根手指的运动而转动、伸展。以下是一段测试代码,请用
    ipad/iphone/android打开: http://wanglingshu.com/wp-content/uploads/ios-gesture.html 
        还有一件要说明的事情是,对于复杂手势,是否会触发某些鼠标事件?确实有,不过我只找到了一个。不管
    你的两根手指在屏幕上伸缩还是转动,都不会有任何鼠标事件触发,但当你的两根手指同时朝上或者朝下移动
    的时候,则会触发某些事件。请看下图:

    两根手指同时向上或向下滚动,如果target element是一个scrollable element(也就是绑定了mousewheel的
    element)的话,将会触发mousewheel事件。如果不是scrollable element,则当手指停止移动的时候,会触
    发onscoll。这里请和第二篇文章的body scroll区别一下,如果你要滚动body,只需要一根手指轻轻拂动屏幕
    ,但是你要滚动一个内部div或者iframe,则需要动用两根手指。     这也是多触式设备一个不太方便的地方。而对于我们开发者来说,这种不方便被放大了。。。因为从用户体
    验角度来说,要求用户使用两根手指滚动一个内部element显然是不合适的,而要实现像滚动body一样用一根
    手指优雅地滚动,我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
    多触式滚动组件:iscroll-4 
    http://cubiq.org/scrolling-div-on-iphone-ipod-touch 
        用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。

  • 相关阅读:
    proto,生成指定包名的java类
    龋齿比较深了还能补吗
    Spring Security with JWT for REST API[转]
    ci-Model使用方法
    ci-crud增删改查基本操作
    openjdk11 下载地址
    System.InvalidOperationException: Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found or is out of date.
    Newtonsoft.Json高级用法之枚举中文转义
    java中文与unicode编码之间的转换
    SpringBoot参数校验-Validator
  • 原文地址:https://www.cnblogs.com/xingmeng/p/4076318.html
Copyright © 2011-2022 走看看