通用事件

通用事件，即所有组件都支持的事件回调

开发者可以在组件标签上使用on{eventName}（如onclick）或@{eventName}（如@click）注册回调事件

更详细的讲解，可查阅事件绑定文档了解

示例代码

<template>
  <div>
    <text onclick="clickFunction1">line 1</text>
    <text @click="clickFunction2">line 2</text>
  </div>
</template>

通用事件

名称	参数	描述
touchstart	TouchEvent	手指刚触摸组件时触发
touchmove	TouchEvent	手指触摸后移动时触发
touchend	TouchEvent	手指触摸动作结束时触发
touchcancel	TouchEvent	手指触摸动作被打断时触发。如：来电、弹窗
click	MouseEvent	组件被点击时触发
longpress	MouseEvent	组件被长按时触发
swipe	{direction:[left | right | up | down]}	组件上快速滑动后触发。 参数说明: left：　向左滑动； right： 向右滑动； up：　 向上滑动； down：向下滑动。

事件对象

1、TouchEvent 类型说明：

属性	类型	说明
touches	TouchList	触摸事件，当前停留在屏幕中的触摸点信息的数组

其中，TouchList 是 Touch 对象的集合。

2、Touch 类型说明：

属性	类型	说明
clientX	number	距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移。
clientY	number	距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏和 titlebar 的高度。

示例

如下，在 div 上绑定了 click 和 touchmove 事件，触发事件时将事件打印出来。

<template>
  <div class="root-page">
    <div class="touch-region" onclick="click" ontouchmove="move"></div>
  </div>
</template>

<style>
  .root-page {
    flex-direction: column;
    align-items: center;
  }

  .touch-region {
    width: 80%;
    height: 20%;
    background-color: #444444;
  }
</style>

<script>
  export default {
    data: {},
    click(event) {
      console.log('click event fired')
    },
    move(event) {
      console.log('move event touches:' + JSON.stringify(event.touches))
    }
  }
</script>

打印结果如下，click 事件：

move event touches:[
  {
    "clientX": 360,
    "pageX": 0,
    "clientY": 113.48148345947266,
    "pageY": 0,
    "offsetX": 0,
    "offsetY": 0,
  }
]

click event fired