通用事件

更新时间：2024-09-01 11:23:11

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

开发者可以在组件标签上使用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	组件被长按时触发	支持

事件对象

1、TouchEvent 类型说明：

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

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

2、Touch 类型说明：

属性	类型	说明
clientX	number	是屏幕的物理横坐标点。
clientY	number	是屏幕的物理纵坐标点。

示例

如下，在 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,
  }
]