Click Event

NOTE

This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Required Permissions

None

Events

Name Bubbling Supported Description
onClick(callback: (event?: ClickEvent) => void) No Called when a click event occurs. For details about the event parameters, see ClickEvent.

ClickEvent

Name Type Description
screenX number X coordinate of the click relative to the left edge of the screen.
screenY number Y coordinate of the click relative to the upper edge of the screen.
x number X coordinate of the click relative to the left edge of the component being clicked.
y number Y coordinate of the click relative to the upper edge of the component being clicked.
target8+ EventTarget Target element that is clicked.
timestamp number Timestamp of the event.

EventTarget8+

Name Type Description
area Area Area information of the target element.

Area8+

Name Type Description
width number Width of the target element, in vp.
height number Height of the target element, in vp.
position Position Position of the upper left corner of the target element relative to that of the parent element.
globalPosition Position Position of the upper left corner of the target element relative to that of the page.

Position8+

Name Type Description
x number X-coordinate, in vp.
y number Y-coordinate, in vp.

Example

// xxx.ets
@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.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n  width:'
          + event.target.area.width + '\n  height:' + event.target.area.height)
        })
      Text(this.text).padding(15)
    }.height(350).width('100%').padding(10)
  }
}

en-us_image_0000001256858383