通用事件

通用事件

通用事件列表：

名称	参数	描述	冒泡
touchstart `1030+`	TouchEvent	手指刚触摸组件时触发	1040+
touchmove `1030+`	TouchEvent	手指触摸后移动时触发	1040+
touchend `1030+`	TouchEvent	手指触摸动作结束时触发	1040+
touchcancel `1030+`	TouchEvent	手指触摸动作被打断时触发。如：来电、弹窗	1040+
click	MouseEvent `1050+`	组件被点击时触发	1040+
longpress	MouseEvent `1050+`	组件被长按时触发	1040+
focus	-	组件获得焦点时触发	不支持
blur	-	组件失去焦点时触发	不支持
appear	-	组件出现时触发	不支持
disappear	-	组件消失时触发	不支持
swipe `1000+`	{direction:[`left` \| `right` \| `up` \| `down`]}	组件上快速滑动后触发。参数说明:left：　向左滑动；right：向右滑动；up：　向上滑动；down：向下滑动。	不支持
resize `1050+`	{offsetWidth: offsetWidthValue, offsetHeight: offsetHeightValue, offsetLeft: offsetLeftValue, offsetTop: offsetTopValue}	组件大小改变后触发	不支持

关于冒泡

1040+ 版本对某些通用事件开放了冒泡功能，这些事件的响应行为与之前版本差异较大。因此为了兼容之前版本，开发者需要在 manifest.json 中将 minPlatformVersion 设置为 1040 或以上，才会启用这类通用事件的冒泡功能。

关于详细示例，请参考：事件监听与触发

事件对象

1、TouchEvent 类型说明：

属性	类型	说明
touches	TouchList	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	TouchList	触摸事件，当前变化的触摸点信息的数组.changedTouches 数据格式同 touches，表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel），比如用户手指离开屏幕时，touches 数组中无数据，而 changedtouches 则会保存离开前的数据

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

2、Touch 类型说明：

属性	类型	说明
identifier	number	触摸点的标识符。对于多点同时触摸则是 0,1[,2,3,…]，分别表示第一个手指、第二个手指…。一次触摸动作(手指按下到手指离开的过程)，在整个屏幕移动过程中，该标识符不变，可以用来判断是否是同一次触摸过程
clientX	number	距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移。
clientY	number	距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏和 titlebar 的高度。
pageX	number	距离可见区域左边沿的 X 轴坐标，包含任何滚动偏移。
pageY	number	距离可见区域上边沿的 Y 轴坐标，包含任何滚动偏移。（不包含状态栏和 titlebar 的高度）
offsetX	number	距离事件触发对象左边沿 X 轴的距离
offsetY	number	距离事件触发对象上边沿 Y 轴的距离

3、MouseEvent 类型说明：

属性	类型	说明
clientX	number	距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移
clientY	number	距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏和 titlebar 的高度
pageX	number	距离可见区域左边沿的 X 轴坐标，包含任何滚动偏移
pageY	number	距离可见区域上边沿的 Y 轴坐标，包含任何滚动偏移。（不包含状态栏和 titlebar 的高度）
offsetX	number	距离事件触发对象左边沿 X 轴的距离
offsetY	number	距离事件触发对象上边沿 Y 轴的距离

示例：

如下，在 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 {
    private: {},
    click(event) {
      console.log("click event fired")
    },
    move(event) {
      console.log("move event touches:" + JSON.stringify(event.touches))
      console.log("move event changedTouches:" + JSON.stringify(event.changedTouches))
    }
  }
</script>

打印结果如下，click 事件：

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

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

click event fired