@ura-web-libs/gesture-detector v0.1.1

手势检测库

用途： 手势框架监听实例化时传入元素上的触摸事件，通过分析生成支持单指和双指

支持的事件：

• 转换(transform) 双指捏合手势, 用于放缩和旋转

使用方法

1.在普通 HTMLElement 上使用 GestureDetector 的方法:

import GestureDetector from '@ura-web-libs/gesture-detector'

const myElement = document.querySelector('#myel')
GestureDetector.embedded(myElement)
myElement.addEventListener('tap', function () {})
myElement.addEventListener('doubletap', function () {}, {once: true})

2.在 UraBaseElement 派生类上使用 GestureDetector 的方法:

class MyElement extends UraBaseElement {
  constructor() {
    super()
    this.startGestureDetector()
    this.addEventListener('tap', function () {})
    this.addEventListener('doubletap', function () {}, {once: true})
  }
}

事件支持

手势检测状态机(Gesture Detector Finite State Machine)

手势事件(Gesture Events)

TapEvent

• definition: one or 2 fingers press, lift
• Usage: Select / Zoom in
• Event: tap
• Interface

Interface TapEvent {
  readonly attribute TouchList touches;
  readonly attribute long fingers; // only support 1 and 2
}

PanEvent

• Definition: One or 2 fingers press, move, lift
• Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
• Event: panstart/panmove/panend
• Interface

Interface PanEvent {
  readonly attribute TouchList startTouches;
  readonly attribute TouchList endTouches;
  readonly attribute TouchList movingTouches;
  readonly attribute long fingers; // only support 1 and 2
}

SwipeEvent

• Definition: One fingers press, move quickly, lift
• Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
• Event: swipestart/swipemove/swipeend
• Interface

Interface SwipeEvent {
  readonly attribute Touch startTouch;
  readonly attribute Touch endTouch;
  readonly attribute double velocity;
  Readonly attribute double direction;
}

PinchEvent

• Definition: Two fingers press, move in/outwards, lift
• Usage: Zoom in/out
• Event: pinchstart/pinchmove/pinchend
• Interface

Interface Enum PinchZoom {
  IN,
  OUT
}

Interface PinchEvent {
  readonly attribute TouchList startTouches;
  readonly attribute TouchList endTouches;
  readonly attribute double scale;
  readonly attribute enum PinchZoom zoom;
}

LongPressEvent

• Definition: One or 2 fingers press, wait, lift
• Usage: Select an element,
• Event: longpress
• Interface

Interface LongPressEvent {
  readonly attribute TouchList pressTouches;
  readonly attribute long fingers; // only support 1 and 2
}

DoubleTapEvent

• Definition: One or 2 fingers press, lift, one or 2 fingers press, lift
• Usage: Selection / Context menu
• Event: doubletap
• Interface

Interface DoubleTapEvent {
  readonly attribute TouchList firstTapTouches;
  readonly attribute TouchList secondTapTouches;
  readonly attribute long fingers; // only support 1 and 2
}

RotateEvent

• Definition: 2 fingers press, simultaneously orbit both fingers around the center point, lift.
• Usage: Rotate content, a picture or a map.
• Event: rotatestart/rotatemove/rotateend
• Interface

Interface RotateEvent {
  readonly attribute TouchList startTouches;
  readonly attribute TouchList endTouches;
  readonly attribute TouchList rotatingTouches;
  readonly attribute double degree;
}

/* Using the this keyword to access the element property of the current object. */
// this.element.addEventListener = new Proxy(this.element.addEventListener, {
//   set(target: any, _: any, val: any) {
//     debug(target, _, val)
//     // if (typeof val == 'object') {
//     //   target.push(val)
//     //   if (target.length > 10) target.shift()
//     // }
//     return true
//   },
//   get(target, prop: any, _) {
//     debug(target, _, prop)
//     return target[prop]
//   },
// })

注意

/**
 * Chrome 上调用 e.preventDedault() 可阻止右键菜单弹出，同时不会影响
 * 正常 touch 事件的分发。
 *
 * Firefox 上调用 e.preventDedault() 可阻止右键菜单弹出，但会中断 touch 事件，
 * 表现为：长按(touchstart)，中断，手抬起再按(touchmove)
 *****
 * 测试长按事件时，请使用终端设备或Chrome
 */
this.addEventListener(
  'contextmenu',
  (e) => {
    e.stopImmediatePropagation()
    if (navigator.vendor === 'Google Inc.') {
      e.preventDefault()
    }
  },
  true
)