Touch Event

A touch event is triggered when a finger is pressed against, swipes on, or is lifted from a component.

NOTE

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

onTouch

onTouch(event: (event: TouchEvent) => void): T

Invoked when a touch event is triggered.

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

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

TouchEvent

Inherits from BaseEvent. In non-injected event scenarios, changedTouches indicates points resampled according to the screen’s refresh rate, while touches indicates points based on the device’s refresh rate. As such, the data in changedTouches may differ from that in touches.

System capability: SystemCapability.ArkUI.ArkUI.Full

getHistoricalPoints¹⁰⁺

getHistoricalPoints(): Array<HistoricalPoint>

Obtains all historical points of the current frame. The touch event frequency of a frame varies by device, and all touch events of the current frame are referred to as its historical points. This API can be called only in TouchEvent. You can use this API to obtain the historical points of the current frame when onTouch is invoked. onTouch is invoked only once for a frame. If the value of TouchEvent received by the current frame is greater than 1, the last point of the frame is returned through onTouch. The remaining points are regarded as historical points.

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

System capability: SystemCapability.ArkUI.ArkUI.Full

Return value

TouchObject

System capability: SystemCapability.ArkUI.ArkUI.Full

HistoricalPoint¹⁰⁺

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

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

This example configures a touch event for a button. When the button is touched, it obtains relevant parameters of the touch event.

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

  build() {
    Column() {
      Button('Touch').height(40).width(100)
        .onTouch((event?: TouchEvent) => {
          if(event){
            if (event.type === TouchType.Down) {
              this.eventType = 'Down'
            }
            if (event.type === TouchType.Up) {
              this.eventType = 'Up'
            }
            if (event.type === TouchType.Move) {
              this.eventType = 'Move'
            }
            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
            + event.target.area.width + '\nheight:' + event.target.area.height + '\ntargetDisplayId:' +
            event.targetDisplayId + '\npressedTime:' + event.touches[0].pressedTime + '\npressure:' +
            event.touches[0].pressure +
              '\nwidth:' + event.touches[0].width + '\nheight:' + event.touches[0].height
          }
        })
      Button('Touch').height(50).width(200).margin(20)
        .onTouch((event?: TouchEvent) => {
          if(event){
            if (event.type === TouchType.Down) {
              this.eventType = 'Down'
            }
            if (event.type === TouchType.Up) {
              this.eventType = 'Up'
            }
            if (event.type === TouchType.Move) {
              this.eventType = 'Move'
            }
            this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
            + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
            + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
            + event.target.area.width + '\nheight:' + event.target.area.height + '\ntargetDisplayId:' +
            event.targetDisplayId + '\npressedTime:' + event.touches[0].pressedTime + '\npressure:' +
            event.touches[0].pressure +
              '\nwidth:' + event.touches[0].width + '\nheight:' + event.touches[0].height
          }
        })
      Text(this.text)
    }.width('100%').padding(30)
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton