點擊事件

組件被點擊時觸發的事件。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

事件

名稱	支持冒泡	功能描述
onClick(event: (event?: ClickEvent) => void)	否	點擊動作觸發該回調，event返回值見ClickEvent對象說明。從API version 9開始，該接口支持在ArkTS卡片中使用。

ClickEvent對象說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	類型	描述
x	number	點擊位置相對于被點擊元素左上角的X坐標。
y	number	點擊位置相對于被點擊元素左上角的Y坐標。
timestamp8+	number	事件時間戳。觸發事件時距離系統啟動的時間間隔，單位納秒。
target8+	[EventTarget]	觸發事件的元素對象顯示區域。
source8+	[SourceType]	事件輸入設備。
windowX10+	number	點擊位置相對于應用窗口左上角的X坐標。
windowY10+	number	點擊位置相對于應用窗口左上角的Y坐標。
displayX10+	number	點擊位置相對于應用屏幕左上角的X坐標。
displayY10+	number	點擊位置相對于應用屏幕左上角的Y坐標。

EventTarget8+對象說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	參數類型	描述
area	[Area]	目標元素的區域信息。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151450.png

示例

// xxx.ets
@Entry
@Component
struct ClickExample {
  @State text: string = ''

  build() {
    Column() {
      Row({ space: 20 }) {
        Button('Click').width(100).height(40)
          .onClick((event?: ClickEvent) = > {
            if(event){
              this.text = 'Click Point:' + 'n  windowX:' + event.windowX + 'n  windowY:' + event.windowY
              + 'n  x:' + event.x + 'n  y:' + event.y + 'ntarget:' + 'n  component globalPos:('
              + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')n  width:'
              + event.target.area.width + 'n  height:' + event.target.area.height + 'ntimestamp' + event.timestamp;
            }
          })
        Button('Click').width(200).height(50)
          .onClick((event?: ClickEvent) = > {
            if(event){
              this.text = 'Click Point:' + 'n  windowX:' + event.windowX + 'n  windowY:' + event.windowY
              + 'n  x:' + event.x + 'n  y:' + event.y + 'ntarget:' + 'n  component globalPos:('
              + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')n  width:'
              + event.target.area.width + 'n  height:' + event.target.area.height + 'ntimestamp' + event.timestamp;
            }
          })
      }.margin(20)

      Text(this.text).margin(15)
    }.width('100%')
  }
}