Click Event

A click event is triggered when a component is clicked.

NOTE

The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

onClick¹²⁺

onClick(event: Callback<ClickEvent>, distanceThreshold: number): T

Called when a click event occurs.

When the click event is triggered by a keyboard or gamepad, the value of SourceTool is Unknown.

Compared to the original onClick API, this API has the distanceThreshold parameter that specifies the movement threshold for click events. If the finger’s movement exceeds the set threshold, the gesture recognition will fail. For scenarios where there is no restriction on the finger movement distance during a click, the original API is recommended. If there is a requirement for the finger to stay within a certain area during the click, this API is recommended.

Widget capability: This API can be used in ArkTS widgets since API version 12.

NOTE

Since API version 12, the following constraints apply when this API is used in service widgets: 1. Click events cannot be triggered if the finger is pressed for more than 800 ms. 2. Click events cannot be triggered if the finger moves more than 20 px after pressing down.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

onClick

onClick(event: (event: ClickEvent) => void): T

Called when a click event occurs.

When the click event is triggered by a keyboard or gamepad, the value of SourceTool is Unknown.

Widget capability: This API can be used in ArkTS widgets since API version 9.

NOTE

Since API version 9, the following constraints apply when this API is used in service widgets: 1. Click events cannot be triggered if the finger is pressed for more than 800 ms. 2. Click events cannot be triggered if the finger moves more than 20 px after pressing down.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

ClickEvent

Inherits from BaseEvent.

System capability: SystemCapability.ArkUI.ArkUI.Full

EventTarget⁸⁺

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

This example shows how to configure a click event for a button. By doing so, you can obtain relevant parameters of the click event when the button is pressed.

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

  build() {
    Column() {
      Row({ space: 20 }) {
        Button('Click').width(100).height(40).id('click')
          .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
                + '\n id:'+ event.target.id + '\ntargetDisplayId:' + event.targetDisplayId;
            }
          }, 20)
        Button('Click').width(200).height(50).id('click')
          .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
                + '\n id:'+ event.target.id + '\ntargetDisplayId:' + event.targetDisplayId;
            }
          }, 20)
      }.margin(20)

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

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton