点击事件

About 5 min

点击事件

说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

权限列表

事件

名称

支持冒泡

功能描述

onClick(callback: (event?: ClickEvent) => void)

点击动作触发该方法调用,event参数见ClickEvent介绍。

  • ClickEvent对象说明

    属性名称

    类型

    描述

    screenX

    number

    点击点相对于设备屏幕左边沿的X坐标。

    screenY

    number

    点击点相对于设备屏幕上边沿的Y坐标。

    x

    number

    点击点相对于被点击元素左边沿的X坐标。

    y

    number

    点击点相对于被点击元素上边沿的Y坐标。

    target8+

    EventTarget

    被点击元素对象。

    timestamp

    number

    事件时间戳。

  • EventTarget对象说明8+

    名称

    参数类型

    描述

    area

    Area

    目标元素的区域信息。

  • Area对象说明8+

    属性名称

    类型

    描述

    width

    Length

    目标元素的宽度。

    height

    Length

    目标元素的高度。

    pos

    Position

    目标元素左上角相对父元素左上角的位置。

    globalPos

    Position

    目标元素左上角相对页面左上角的位置。

  • Position对象说明8+

    属性名称

    参数类型

    描述

    x

    Length

    x轴坐标。

    y

    Length

    y轴坐标。

示例

@Entry
@Component
struct ClickExample {
  @State text: string = ''

  build() {
    Column() {
      Button('Click').backgroundColor(0x2788D9).width(100).height(40)
        .onClick((event: ClickEvent) => {
          console.info(this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
          + '\n  x :' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos:('
          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n  width:'
          + event.target.area.width + '\n  height:' + event.target.area.height)
        })
      Text(this.text).padding(15)
    }.height(350).width('100%').padding(10)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18