Question

手势事件

Tabris.js有基于4种手势类型的13种手势事件：

• tap - 手指短暂地触摸控件时，触发一次。
• longpress - 手指触摸控件一定时间（约一秒，取决于平台），抬起手指时触发。
• pan - 当手指向任一方向移动一定距离（约5px，取决于平台）时，就开始连续触发。事件始终在触摸的第一个元素上触发，即使手指移动到控件之外。
• panLeft - 当手指向左移动一定距离时，就开始连续触发。
• panRight - 当手指向右移动一定距离时，就开始连续触发。
• panUp - 当手指向上移动一定距离时，就开始连续触发。
• panDown - 当手指向下移动一定距离时，就开始连续触发。
• panHorizontal - 当手指向左或向右移动一定距离时，就开始连续触发。
• panVertical - 当手指向上或向下移动一定距离时，就开始连续触发。
• swipeLeft - 当手指快速向左移动一定（较长）距离（可能取决于平台）时，触发一次。
• swipeRight - 当手指快速向右移动一定（较长）距离（可能取决于平台）时，触发一次。
• swipeUp - 当手指快速向上移动一定（较长）距离（可能取决于平台）时，触发一次。
• swipeDown - 当手指快速向下移动一定（较长）距离（可能取决于平台）时，触发一次。

示例：

widget.on("swipeLeft", event => moveWidgetLeft());

所有手势事件都有下面的共同属性：

• target: Widget - 接收事件的控件
• timeStamp: number - 事件产生时间，以毫秒表示
• state: string - 包含事件的状态（见下文）。
• touches: {x: number, y: number}[] - 相对于控件原点的，所有当前触摸点的坐标的数组。

Pan手势事件还包含这些额外的属性：

• translationX: number - 相对于第一个触摸点的，当前触摸点的坐标
• translationY: number - 相对于第一个触摸点的，当前触摸点的坐标
• velocityX: number - 用每秒移动的像素表示的，当前触摸点的速度
• velocityY: number - 用每秒移动的像素表示的，当前触摸点的速度

事件状态：

• "recognized": 只触发一次的手势的状态（tap 和 swipe）。
• "start": 手势开始，即开始移动（pan）或已经按压足够时间（长按）。
• "change": 通过移动手指继续手势（只针对pan）。
• "end": 通过抬起所有手指停止手势（pan 和 长按）。
• "cancel": 手势被打断，比如弹出对话框（pan 和 长按）。

可滚动/可拖拽（pan）控件的手势

在可滚动控件中，比如ScrollView 或 CollectionView, 在不可滚动方向识别到的pan 或 swipe手势会阻止滚动。因此，在垂直滚动的ScrollView中的控件上添加一个水平拖拽（pan）监听时，会阻止任何以水平移动手势开始的滚动。当没有添加pan手势监听或从垂直方向开始移动，仍然可以滚动。

触摸事件

触摸事件是手势事件的低级替代事件。只有当手势无法准确地表示交互时，才应使用它们。 所有触摸事件的目标对象都是第一个触摸的控件。可用的触摸事件类型有：

• touchStart - 手指触摸控件时触发。
• touchMove - 在开始touchStart事件后，在屏幕上滑动时反复触发。
• touchEnd - 当交互在接收touchStart事件的同一个控件上结束（比如抬起手指）时触发。
• touchCancel - 当触摸交互在另一个控件上结束而不是在触摸开始的控件上结束时触发，不触发touchEnd事件。

事件对象包括下面的属性：

• target: Widget - 接收事件的控件
• timeStamp: number - 事件产生的时间，以毫秒表示
• touches: {x: number, y: number, absoluteX: number, absoluteY: number}[] - 所有当前触摸点的触摸坐标数组。x / y坐标是相对于父控件的，而absoluteX / absoluteY坐标相对于ui.contentView。 由于当前不支持多点触摸，因此数组始终只有一个元素。

示例：

widget.on("touchStart", ({touches: [{absoluteX, absoluteY}]}) => {
  let x = absoluteX;
  let y = absoluteY;
  ...
});