點(diǎn)擊事件

組件被點(diǎn)擊時(shí)觸發(fā)的事件。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

事件

名稱	支持冒泡	功能描述
onClick(event: (event?: ClickEvent) => void)	否	點(diǎn)擊動(dòng)作觸發(fā)該回調(diào)，event返回值見(jiàn)ClickEvent對(duì)象說(shuō)明。從API version 9開(kāi)始，該接口支持在ArkTS卡片中使用。

ClickEvent對(duì)象說(shuō)明

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

名稱	類型	描述
x	number	點(diǎn)擊位置相對(duì)于被點(diǎn)擊元素左上角的X坐標(biāo)。
y	number	點(diǎn)擊位置相對(duì)于被點(diǎn)擊元素左上角的Y坐標(biāo)。
timestamp8+	number	事件時(shí)間戳。觸發(fā)事件時(shí)距離系統(tǒng)啟動(dòng)的時(shí)間間隔，單位納秒。
target8+	[EventTarget]	觸發(fā)事件的元素對(duì)象顯示區(qū)域。
source8+	[SourceType]	事件輸入設(shè)備。
windowX10+	number	點(diǎn)擊位置相對(duì)于應(yīng)用窗口左上角的X坐標(biāo)。
windowY10+	number	點(diǎn)擊位置相對(duì)于應(yīng)用窗口左上角的Y坐標(biāo)。
displayX10+	number	點(diǎn)擊位置相對(duì)于應(yīng)用屏幕左上角的X坐標(biāo)。
displayY10+	number	點(diǎn)擊位置相對(duì)于應(yīng)用屏幕左上角的Y坐標(biāo)。

EventTarget8+對(duì)象說(shuō)明

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

名稱	參數(shù)類型	描述
area	[Area]	目標(biāo)元素的區(qū)域信息。`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%')
  }
}

zh-cn_image_0000001210353788

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴